:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #eef2f7;
  --sidebar-width: 286px;
  --accent: #5b4bdb;
  --accent-soft: #eeeafd;
  --line: #e2e6ef;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

/* ---------- Login ---------- */
.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, .16), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(14, 165, 233, .12), transparent 35%),
    #f7f9fc;
}
.auth-card {
  width: min(430px, 100%);
  background: rgba(255,255,255,.94);
  border: 1px solid #e4e9f2;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(38, 49, 77, .14);
}
.brand-mark {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px;
  background: #4f46e5; color: white; font-size: 34px; line-height: 1; margin-bottom: 12px;
}
.auth-card h1 { margin: 0; font-size: 28px; }
.auth-subtitle { margin: 8px 0 22px; color: #667085; line-height: 1.45; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #eef1f6; border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.auth-tab { border: 0; background: transparent; padding: 10px; border-radius: 9px; cursor: pointer; color: #5e687a; }
.auth-tab.active { background: white; color: #263149; box-shadow: 0 2px 8px rgba(35,45,70,.08); font-weight: 700; }
.auth-card form { display: grid; gap: 14px; }
.auth-card label { display: grid; gap: 6px; color: #35405a; font-size: 14px; font-weight: 600; }
.auth-card input { width: 100%; border: 1px solid #cfd6e3; border-radius: 10px; padding: 12px 13px; outline: none; background: white; }
.auth-card input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.primary-btn { border: 0; border-radius: 11px; padding: 12px 16px; background: #4f46e5; color: white; font-weight: 700; cursor: pointer; margin-top: 2px; }
.primary-btn:disabled { opacity: .6; cursor: wait; }
.auth-error { min-height: 20px; color: #b42318; margin: 0; font-size: 14px; }
.auth-tip { color: #7a8496; font-size: 13px; line-height: 1.45; margin: 18px 0 0; }

/* ---------- App shell ---------- */
.app-body { width: 100vw; height: 100vh; overflow: hidden; background: #fff; user-select: none; }
.sidebar {
  position: fixed; z-index: 90; inset: 0 auto 0 0; width: var(--sidebar-width);
  display: flex; flex-direction: column; background: #f7f6fb; border-right: 1px solid #dedce7;
  box-shadow: 3px 0 18px rgba(40, 36, 60, .04);
}
.sidebar-brand { height: 72px; display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-bottom: 1px solid #e6e3ed; }
.sidebar-brand .logo-small { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: white; font-size: 25px; flex: 0 0 auto; }
.sidebar-brand div { min-width: 0; display: grid; gap: 2px; }
.sidebar-brand strong { font-size: 14px; }
.sidebar-brand small { color: #777184; font-size: 10px; }
.sidebar-close { display: none; margin-left: auto; border: 0; background: transparent; font-size: 25px; color: #665f72; cursor: pointer; }
.sidebar-section { padding: 10px 8px; min-height: 0; }
.notebooks-section { flex: 0 0 auto; max-height: 38vh; overflow: auto; }
.pages-section { flex: 1 1 auto; overflow: auto; border-top: 1px solid #e7e4ed; }
.sidebar-heading { height: 30px; padding: 0 6px 4px; display: flex; align-items: center; justify-content: space-between; color: #625c6e; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mini-add { width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--accent); font-size: 20px; line-height: 1; cursor: pointer; }
.mini-add:hover { background: #ebe7f6; }
.notebook-list, .page-list { display: grid; gap: 2px; }
.side-row { display: grid; grid-template-columns: minmax(0,1fr) 27px 27px; align-items: center; min-height: 38px; border-radius: 8px; color: #4e4858; }
.side-row:hover { background: #ece9f3; }
.side-row.active { background: #e7e1fb; color: #332683; }
.side-main { min-width: 0; height: 38px; border: 0; background: transparent; display: flex; align-items: center; gap: 8px; padding: 0 8px; color: inherit; cursor: pointer; text-align: left; }
.side-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.book-dot { width: 9px; height: 22px; border-radius: 3px; background: var(--accent); box-shadow: inset -2px 0 rgba(255,255,255,.2); flex: 0 0 auto; }
.page-icon { font-size: 14px; color: #8e879b; }
.side-edit, .side-delete { width: 25px; height: 25px; border: 0; border-radius: 6px; background: transparent; color: #91899c; cursor: pointer; opacity: 0; }
.side-row:hover .side-edit, .side-row:hover .side-delete, .side-row.active .side-edit, .side-row.active .side-delete { opacity: 1; }
.side-edit:hover { background: white; color: #554d64; }
.side-delete:hover { background: #fff0ef; color: #b42318; }
.sidebar-footer { padding: 10px; border-top: 1px solid #e2dfe9; display: grid; gap: 8px; }
.offline-note { font-size: 10px; line-height: 1.35; color: #817a8b; padding: 0 3px; }
.sidebar-logout { height: 34px; border: 1px solid #d9d5e1; background: #fff; color: #5c5566; border-radius: 8px; cursor: pointer; }
.sidebar-backdrop { display: none; }

.main-area { position: fixed; inset: 0 0 0 var(--sidebar-width); overflow: hidden; background: #fff; }
#workspace {
  position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: crosshair;
  background-color: #fbfcfe;
  background-image:
    linear-gradient(to right, rgba(123, 139, 164, .15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(123, 139, 164, .15) 1px, transparent 1px);
  background-size: 40px 40px; background-position: 0 0;
}
#workspace.drag-over::after { content: "Drop image or PDF to insert"; position: absolute; inset: 20px; z-index: 35; display: grid; place-items: center; border: 3px dashed #7567e7; border-radius: 18px; background: rgba(91,75,219,.08); color: #4a3abd; font-weight: 800; pointer-events: none; }
#drawCanvas, #objectLayer { position: absolute; inset: 0; width: 100%; height: 100%; }
#drawCanvas { pointer-events: none; }
#objectLayer { pointer-events: none; overflow: hidden; }

/* ---------- Canvas DOM objects ---------- */
.canvas-object {
  position: absolute; transform-origin: top left; border: 1px solid transparent; border-radius: 5px;
  pointer-events: none; overflow: visible;
}
.canvas-object.selected { border-color: #6557d9; box-shadow: 0 0 0 1px rgba(101,87,217,.15); }
.canvas-object.select-mode { pointer-events: auto; cursor: grab; }
.canvas-object.select-mode:active { cursor: grabbing; }
.resize-handle {
  display: none; position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px;
  box-sizing: border-box; border-radius: 5px; background: white; border: 2px solid #5b4bdb;
  cursor: nwse-resize; z-index: 30; touch-action: none; user-select: none; -webkit-user-select: none;
}
.canvas-object.selected.select-mode .resize-handle,
.text-object.selected.text-mode .resize-handle { display: block; pointer-events: auto; }
@media (pointer: coarse) {
  .resize-handle { right: -12px; bottom: -12px; width: 24px; height: 24px; border-width: 3px; border-radius: 7px; }
}
.text-object { background: rgba(255,255,255,.02); }
.text-object.text-mode { pointer-events: auto; }
.text-editor {
  width: 100%; height: 100%; min-height: 100%; padding: 6px 8px; outline: none; white-space: pre-wrap;
  overflow-wrap: anywhere; overflow: auto; line-height: 1.35; background: transparent;
  user-select: text; -webkit-user-select: text; pointer-events: auto; touch-action: manipulation;
  caret-color: currentColor; cursor: text;
}
.text-object.text-mode .text-editor { cursor: text; background: rgba(255,255,255,.88); }
.text-object.text-mode:focus-within { border-color: rgba(91,75,219,.55); }
.media-object { background: #fff; box-shadow: 0 2px 8px rgba(25,35,55,.08); overflow: hidden; }
.inserted-media { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #fff; pointer-events: none; }
.pdf-object .inserted-media { object-fit: initial; }
.media-label { position: absolute; left: 6px; bottom: 5px; max-width: calc(100% - 58px); padding: 3px 6px; border-radius: 5px; background: rgba(20,25,40,.72); color: white; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; }
.media-open { position: absolute; right: 5px; top: 5px; border: 1px solid #d8dbe5; border-radius: 6px; background: rgba(255,255,255,.92); color: #4c4564; font-size: 10px; padding: 4px 7px; cursor: pointer; pointer-events: auto; }

/* ---------- Top bar ---------- */
.topbar {
  position: absolute; z-index: 50; top: 10px; left: 12px; right: 12px; height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none;
}
.topbar-left, .topbar-right {
  pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 44px;
  background: rgba(255,255,255,.93); border: 1px solid #e3e6ee; border-radius: 11px;
  box-shadow: 0 5px 17px rgba(31,39,60,.08); backdrop-filter: blur(10px);
}
.topbar-left { padding: 4px 11px 4px 7px; }
.topbar-right { padding: 5px 7px; }
.hamburger { display: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; font-size: 18px; cursor: pointer; color: #50495d; }
.hamburger:hover { background: #f0eef5; }
.page-context { display: grid; min-width: 100px; max-width: 300px; }
.page-context strong, .page-context small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-context strong { font-size: 13px; }
.page-context small { font-size: 10px; color: #7d7686; }
.status-pill { font-size: 11px; padding: 5px 8px; border-radius: 999px; background: #e9f8ef; color: #13703a; white-space: nowrap; }
.status-pill.warn { background: #fff4e5; color: #935d05; }
.status-pill.offline { background: #feeceb; color: #a7322c; }
.status-pill.subtle { background: #f1f3f7; color: #586174; }
.user-label { font-size: 12px; color: #4c566a; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Toolbar ---------- */
.toolbar {
  position: absolute; z-index: 60; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; max-width: calc(100% - 20px); padding: 7px;
  border: 1px solid #dfe3eb; border-radius: 14px; background: rgba(255,255,255,.95);
  box-shadow: 0 12px 34px rgba(25,35,55,.16); backdrop-filter: blur(12px);
  overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.tool-btn {
  flex: 0 0 auto; height: 44px; min-width: 46px; border: 0; border-radius: 9px; padding: 5px 8px;
  display: grid; place-items: center; gap: 1px; background: transparent; color: #475166; cursor: pointer; font-size: 18px;
}
.tool-btn span { font-size: 9px; line-height: 1; }
.tool-btn:hover { background: #f2f3f7; }
.tool-btn.active { background: var(--accent); color: white; }
.tool-btn.highlighter-icon { font-size: 16px; }
.tool-btn.danger { color: #b42318; font-size: 11px; font-weight: 700; }
.tool-btn.danger:hover { background: #fff0ef; }

.tool-btn.clear-page-btn { min-width: 58px; }
.tool-btn.clear-page-btn span { font-size: 8px; white-space: nowrap; }
.tool-btn.action { font-size: 16px; }
.tool-btn.zoom-value { font-size: 10px; font-weight: 800; min-width: 50px; }
.toolbar-separator { width: 1px; height: 31px; background: #e0e4ec; flex: 0 0 auto; margin: 0 3px; }
.shape-select { flex: 0 0 auto; height: 34px; max-width: 94px; border: 1px solid #d9dfe8; border-radius: 8px; background: #fff; color: #596275; padding: 0 6px; font-size: 10px; outline: none; }
.shape-select.active { border-color: #7769e7; box-shadow: 0 0 0 2px rgba(91,75,219,.1); }
.color-control, .range-control { flex: 0 0 auto; height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 7px; font-size: 9px; color: #596275; }
.color-control { flex-direction: column; justify-content: center; gap: 1px; }
.color-control input { width: 30px; height: 22px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.range-control input { width: 82px; }
.range-control output { min-width: 18px; text-align: center; font-weight: 700; }
.canvas-hint { position: absolute; z-index: 40; left: 50%; top: 66px; transform: translateX(-50%); padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.86); border: 1px solid #e4e8ef; color: #687286; font-size: 10px; pointer-events: none; white-space: nowrap; }
.toast { position: absolute; z-index: 110; right: 16px; bottom: 78px; background: #172033; color: white; border-radius: 9px; padding: 9px 12px; font-size: 12px; opacity: 0; transform: translateY(8px); transition: .18s ease; pointer-events: none; max-width: min(360px, 80vw); }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .user-label { display: none; }
  .range-control input { width: 68px; }
  .tool-btn { min-width: 43px; }
}

@media (max-width: 820px) {
  :root { --sidebar-width: 280px; }
  .main-area { inset: 0; }
  .sidebar { transform: translateX(-102%); transition: transform .2s ease; box-shadow: 8px 0 32px rgba(25,24,35,.18); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: block; }
  .sidebar-backdrop { position: fixed; z-index: 80; inset: 0; display: block; background: rgba(20,20,30,.28); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .hamburger { display: block; }
  .topbar { top: 6px; left: 6px; right: 6px; }
  .status-pill.subtle, .user-label { display: none; }
  .page-context { max-width: 180px; }
  .toolbar { bottom: 7px; max-width: calc(100% - 10px); border-radius: 12px; }
  .canvas-hint { top: 58px; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; }
  .tool-btn { min-width: 42px; height: 42px; }
  .shape-select { max-width: 82px; }
}

@media (max-width: 520px) {
  .topbar-right { padding: 4px; }
  .status-pill { font-size: 9px; padding: 4px 6px; max-width: 145px; overflow: hidden; text-overflow: ellipsis; }
  .page-context { max-width: 125px; }
  .canvas-hint { display: none; }
  .toolbar { padding: 5px; gap: 2px; }
  .tool-btn { min-width: 39px; height: 40px; padding: 4px 6px; }
  .range-control { padding: 0 4px; }
  .range-control input { width: 58px; }
}

/* ---------- v3 OneNote-style additions ---------- */
.sidebar-quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:7px 8px; border-bottom:1px solid #e7e4ed; }
.sidebar-quick-actions button { border:1px solid #ddd9e6; background:#fff; color:#61596e; border-radius:8px; height:31px; cursor:pointer; font-size:11px; display:flex; gap:4px; align-items:center; justify-content:center; }
.sidebar-quick-actions button:hover { background:#eeeafd; color:#44359d; }
.sections-section { flex:0 0 auto; max-height:25vh; overflow:auto; border-top:1px solid #e7e4ed; }
.notebook-list, .section-list, .page-list { display:grid; gap:2px; }
.section-dot { width:16px; height:6px; border-radius:999px; background:#8b7ce5; flex:0 0 auto; }
.page-tags-mini { margin-left:auto; font-size:9px; color:#7f7693; white-space:nowrap; max-width:70px; overflow:hidden; text-overflow:ellipsis; }
.top-icon-btn { width:30px; height:30px; border:0; border-radius:7px; background:transparent; color:#5b5268; cursor:pointer; font-weight:800; }
.top-icon-btn:hover { background:#f0edf6; }
.top-select { height:30px; border:1px solid #dadde6; border-radius:7px; background:#fff; color:#5e6677; font-size:10px; padding:0 4px; }
#drawCanvas { z-index:3; pointer-events:none; }
#objectLayer { z-index:2; pointer-events:none; }
#workspace.background-blank { background-image:none !important; }
#workspace.background-ruled { background-image:linear-gradient(to bottom, rgba(123,139,164,.18) 1px, transparent 1px); }
#workspace.background-dots { background-image:radial-gradient(circle, rgba(112,124,148,.33) 1.2px, transparent 1.4px); }
#workspace.background-grid { background-image:linear-gradient(to right, rgba(123,139,164,.15) 1px, transparent 1px),linear-gradient(to bottom, rgba(123,139,164,.15) 1px, transparent 1px); }
.rich-text-bar { position:absolute; z-index:65; left:50%; top:66px; transform:translateX(-50%); display:none; align-items:center; gap:3px; padding:5px 6px; background:rgba(255,255,255,.97); border:1px solid #dfe3eb; border-radius:10px; box-shadow:0 7px 22px rgba(25,35,55,.12); }
.rich-text-bar.show { display:flex; }
.rich-text-bar button { min-width:29px; height:29px; border:0; border-radius:6px; background:transparent; color:#4c566a; cursor:pointer; }
.rich-text-bar button:hover { background:#f0eef7; }
.rich-text-bar button[data-align="center"] { text-align:center; }
.rich-text-bar button[data-align="right"] { text-align:right; }
.rich-text-bar select { height:29px; border:1px solid #d9dfe8; border-radius:6px; background:#fff; font-size:11px; }
.text-editor { text-align:left; }
.text-editor ul, .text-editor ol { margin:.25em 0; padding-left:1.5em; }
.canvas-object.selected.multi-selected { box-shadow:0 0 0 2px rgba(91,75,219,.24); }
.lasso-info { position:absolute; pointer-events:none; border:1.5px dashed #5b4bdb; background:rgba(91,75,219,.08); }
.modal-backdrop { position:fixed; z-index:200; inset:0; background:rgba(23,27,39,.35); display:grid; place-items:center; padding:18px; }
.modal-backdrop[hidden] { display:none; }
.utility-modal { width:min(680px,96vw); max-height:min(78vh,760px); display:flex; flex-direction:column; background:#fff; border:1px solid #dddfe8; border-radius:16px; box-shadow:0 24px 75px rgba(23,28,45,.25); overflow:hidden; }
.utility-modal>header { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid #e5e7ee; }
.utility-modal>header button { width:32px; height:32px; border:0; border-radius:8px; background:transparent; font-size:22px; cursor:pointer; }
.modal-body { padding:14px; overflow:auto; display:grid; gap:10px; }
.modal-search { width:100%; border:1px solid #cfd6e3; border-radius:10px; padding:11px 12px; outline:none; }
.modal-search:focus { border-color:#6b5ce3; box-shadow:0 0 0 3px rgba(91,75,219,.11); }
.result-list { display:grid; gap:6px; }
.result-item { display:grid; gap:3px; width:100%; text-align:left; border:1px solid #e1e4ec; background:#fff; border-radius:10px; padding:10px 11px; cursor:pointer; }
.result-item:hover { background:#f7f5ff; border-color:#d8d0fb; }
.result-item strong { color:#283149; }
.result-item small { color:#7a8395; }
.result-item span { color:#505b70; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modal-actions { display:flex; gap:7px; flex-wrap:wrap; }
.modal-actions button, .version-row button, .recycle-row button { border:1px solid #d8dce6; background:#fff; color:#514a61; border-radius:8px; padding:7px 10px; cursor:pointer; }
.modal-actions button.primary { background:#5b4bdb; color:#fff; border-color:#5b4bdb; }
.version-row, .recycle-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; border:1px solid #e2e5ec; border-radius:10px; padding:9px 10px; }
.version-row small, .recycle-row small { color:#7d8595; }
.recycling-danger { color:#b42318 !important; }
.tag-chip { display:inline-flex; align-items:center; padding:3px 7px; border-radius:999px; background:#eeeafd; color:#4c3db0; font-size:10px; margin:2px 2px 0 0; }

@media (max-width:820px) {
  .rich-text-bar { top:57px; max-width:calc(100% - 12px); overflow-x:auto; }
  .sidebar-quick-actions button span { display:none; }
  .top-select { max-width:72px; }
}

/* ---------- Dark mode ---------- */
body.dark { color:#e8eaf0; background:#171821; }
body.dark .sidebar { background:#1e1d26; border-color:#35323f; box-shadow:none; }
body.dark .sidebar-brand, body.dark .sidebar-footer, body.dark .sections-section, body.dark .pages-section, body.dark .sidebar-quick-actions { border-color:#373441; }
body.dark .sidebar-brand small, body.dark .sidebar-heading, body.dark .offline-note { color:#aaa4b4; }
body.dark .side-row { color:#d4cfdb; }
body.dark .side-row:hover { background:#2a2833; }
body.dark .side-row.active { background:#352f53; color:#f0ecff; }
body.dark .sidebar-quick-actions button, body.dark .sidebar-logout { background:#27252f; border-color:#3e3a49; color:#d7d1df; }
body.dark .main-area { background-color:#181a20; }
body.dark #workspace { background-color:#fbfcfe; color:#111827; }
body.dark #workspace.background-grid { background-image:linear-gradient(to right, rgba(123,139,164,.15) 1px, transparent 1px),linear-gradient(to bottom, rgba(123,139,164,.15) 1px, transparent 1px); }
body.dark #workspace.background-ruled { background-image:linear-gradient(to bottom, rgba(123,139,164,.18) 1px, transparent 1px); }
body.dark #workspace.background-dots { background-image:radial-gradient(circle, rgba(112,124,148,.33) 1.2px, transparent 1.4px); }
body.dark .topbar-left, body.dark .topbar-right, body.dark .toolbar, body.dark .rich-text-bar { background:rgba(35,36,45,.96); border-color:#424451; color:#e7e9ef; }
body.dark .top-icon-btn, body.dark .tool-btn, body.dark .color-control, body.dark .range-control { color:#d5d8e2; }
body.dark .tool-btn:hover, body.dark .top-icon-btn:hover, body.dark .rich-text-bar button:hover { background:#30313b; }
body.dark .shape-select, body.dark .top-select, body.dark .rich-text-bar select { background:#272933; border-color:#444754; color:#e2e5ed; }
body.dark .page-context small { color:#a6a9b3; }
body.dark .text-object.text-mode .text-editor { background:rgba(255,255,255,.92); }
body.dark .media-object { background:#22242b; }
body.dark .utility-modal { background:#20212a; border-color:#3c3e49; color:#e9ebf0; }
body.dark .utility-modal>header { border-color:#383a45; }
body.dark .modal-search, body.dark .result-item, body.dark .version-row, body.dark .recycle-row, body.dark .modal-actions button, body.dark .version-row button, body.dark .recycle-row button { background:#282a34; border-color:#41434f; color:#e5e7ed; }
body.dark .result-item strong { color:#f1f2f5; }
body.dark .result-item:hover { background:#302d43; border-color:#514b78; }
body.dark .canvas-hint { background:rgba(35,36,45,.86); border-color:#444650; color:#bdc1cc; }

/* ---------- v3.1 collaboration ---------- */
#cursorLayer { position:absolute; inset:0; z-index:38; pointer-events:none; overflow:hidden; }
.remote-cursor { position:absolute; left:0; top:0; pointer-events:none; will-change:transform; display:flex; align-items:flex-start; gap:3px; }
.remote-cursor-arrow { display:block; transform:translate(-5px,-5px) rotate(45deg); width:10px; height:10px; overflow:hidden; color:#5b4bdb; font-size:10px; line-height:10px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.remote-cursor-name { margin-left:-3px; margin-top:6px; padding:2px 5px; border-radius:5px; background:#5b4bdb; color:#fff; font-size:9px; font-weight:700; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.16); }
.share-top-btn { height:30px; border:0; border-radius:7px; padding:0 10px; background:#5b4bdb; color:#fff; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.share-top-btn:hover { filter:brightness(.96); }
.focus-work-btn { font-weight:800; font-size:16px; }
.focus-work-btn:active { transform:scale(.96); }
.people-pill { background:#eeeafd; color:#4d3f9f; cursor:default; }
.notebook-group-heading { padding:8px 8px 3px; color:#91899b; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.share-role-mini { margin-left:auto; padding:2px 5px; border-radius:999px; background:#eeeafd; color:#5547b5; font-size:8px; font-weight:800; white-space:nowrap; }
button:disabled, select:disabled, input:disabled { opacity:.48; cursor:not-allowed !important; }
.permission-disabled { opacity:.42; }
body.read-only .canvas-object.selected.select-mode .resize-handle { display:none; }
.share-access-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:center; border:1px solid #e0e3eb; border-radius:11px; padding:11px 12px; background:#fbfbfd; }
.share-access-card strong { overflow:hidden; text-overflow:ellipsis; }
.share-access-card span { justify-self:end; padding:3px 7px; border-radius:999px; background:#eeeafd; color:#5142aa; font-size:10px; font-weight:800; }
.share-access-card small { grid-column:1 / -1; color:#7b8496; }
.modal-subtitle { margin:7px 0 0; font-size:12px; color:#4e5668; }
.share-invite-row { display:grid; grid-template-columns:minmax(0,1fr) 110px auto; gap:7px; align-items:center; }
.share-invite-row select, .share-member-row select, .share-link-settings select { height:38px; border:1px solid #d5dae5; border-radius:9px; background:#fff; color:#4f596c; padding:0 8px; }
.share-invite-row button, .share-url-row button { height:38px; border:1px solid #5b4bdb; border-radius:9px; background:#5b4bdb; color:#fff; padding:0 12px; cursor:pointer; }
.share-member-row { display:grid; grid-template-columns:minmax(0,1fr) 110px auto; gap:8px; align-items:center; border:1px solid #e2e5ec; border-radius:10px; padding:9px 10px; }
.share-member-row small { color:#7d8595; }
.share-member-row button { border:1px solid #e1c5c2; background:#fff; border-radius:8px; padding:7px 9px; cursor:pointer; }
.share-link-settings { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; border:1px solid #e2e5ec; border-radius:10px; padding:10px; }
.share-link-settings label { display:grid; gap:5px; font-size:10px; color:#697286; }
.share-link-settings .share-check { display:flex; align-items:center; gap:4px; padding-top:18px; }
.share-url-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.share-url-row input { min-width:0; height:38px; border:1px solid #d5dae5; border-radius:9px; padding:0 10px; background:#f8f9fb; color:#4d5668; }
body.dark .share-access-card, body.dark .share-member-row, body.dark .share-link-settings { background:#282a34; border-color:#41434f; }
body.dark .share-invite-row select, body.dark .share-member-row select, body.dark .share-link-settings select, body.dark .share-url-row input { background:#262832; border-color:#444754; color:#e4e7ef; }
body.dark .notebook-group-heading { color:#8f8998; }
body.dark .share-role-mini { background:#3a335a; color:#d8d1ff; }
@media (max-width:700px) {
  .people-pill { display:none; }
  .share-top-btn { padding:0 7px; font-size:10px; }
  .share-invite-row, .share-member-row { grid-template-columns:minmax(0,1fr) 95px; }
  .share-invite-row button, .share-member-row button { grid-column:1 / -1; }
  .share-link-settings { grid-template-columns:1fr; }
  .share-link-settings .share-check { padding-top:0; }
}


/* ---------- Notebook chat ---------- */
.chat-top-btn { position:relative; border:1px solid #d9d5e2; background:#fff; color:#51485f; border-radius:8px; height:30px; padding:0 10px; font-weight:700; cursor:pointer; }
.chat-top-btn:hover { background:#f3f0fb; color:#44359d; }
.chat-badge { position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 5px; border-radius:10px; display:grid; place-items:center; background:#d92d20; color:#fff; border:2px solid #fff; font-size:10px; line-height:1; }
.chat-badge[hidden] { display:none; }
.chat-panel { position:fixed; z-index:170; top:0; right:0; width:min(390px,92vw); height:100dvh; background:#fff; border-left:1px solid #dedbe5; box-shadow:-12px 0 38px rgba(30,26,44,.16); display:grid; grid-template-rows:auto auto 1fr auto; transform:translateX(105%); transition:transform .2s ease; color:#302a39; }
.chat-panel.open { transform:translateX(0); }
.chat-header { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px 10px 15px; border-bottom:1px solid #e6e3eb; }
.chat-header>div { min-width:0; display:grid; gap:2px; }
.chat-header strong { font-size:15px; }
.chat-header small { color:#777080; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header button { width:34px; height:34px; border:0; border-radius:9px; background:transparent; font-size:24px; color:#625a6d; cursor:pointer; }
.chat-load-older { margin:8px auto 0; border:1px solid #ddd8e7; background:#f8f7fb; color:#5b5268; border-radius:18px; padding:6px 12px; cursor:pointer; font-size:12px; }
.chat-messages { min-height:0; overflow:auto; padding:12px 12px 18px; display:flex; flex-direction:column; gap:9px; overscroll-behavior:contain; }
.chat-empty { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(300px,80%); color:#8a8390; font-size:13px; text-align:center; padding:30px 18px; pointer-events:none; }
.chat-empty[hidden] { display:none; }
.chat-message { max-width:86%; display:grid; gap:3px; align-self:flex-start; }
.chat-message.mine { align-self:flex-end; }
.chat-message-meta { display:flex; gap:7px; align-items:center; color:#898291; font-size:10px; padding:0 5px; }
.chat-message.mine .chat-message-meta { justify-content:flex-end; }
.chat-message-author { color:#62586f; font-weight:800; }
.chat-bubble { background:#f0eef5; color:#2d2933; border-radius:13px 13px 13px 4px; padding:8px 10px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.35; font-size:14px; }
.chat-message.mine .chat-bubble { background:#5b4bd8; color:#fff; border-radius:13px 13px 4px 13px; }
.chat-message.deleted .chat-bubble { background:#f5f4f7; color:#918a96; font-style:italic; }
.chat-page-link { justify-self:start; border:0; background:transparent; color:#6454ce; padding:0 4px; font-size:10px; cursor:pointer; text-decoration:underline; }
.chat-message.mine .chat-page-link { justify-self:end; }
.chat-delete-message { border:0; background:transparent; color:#a09aa5; padding:0 4px; font-size:10px; cursor:pointer; }
.chat-composer { border-top:1px solid #e5e2e9; padding:10px; background:#fbfafc; display:grid; gap:7px; }
.chat-composer textarea { width:100%; min-height:48px; max-height:140px; resize:vertical; border:1px solid #d8d3df; border-radius:11px; padding:9px 10px; font:inherit; color:#302a39; background:#fff; outline:none; }
.chat-composer textarea:focus { border-color:#7668df; box-shadow:0 0 0 3px rgba(91,75,216,.10); }
.chat-compose-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.chat-compose-row small { color:#8a8390; font-size:10px; }
.chat-compose-row button { border:0; border-radius:9px; background:#5b4bd8; color:#fff; font-weight:800; padding:8px 15px; cursor:pointer; }
.chat-compose-row button:disabled { opacity:.55; cursor:wait; }
.chat-backdrop { display:none; }
body.dark .chat-panel { background:#22202a; color:#eeeaf4; border-color:#3d3946; }
body.dark .chat-header, body.dark .chat-composer { border-color:#3d3946; background:#24212c; }
body.dark .chat-top-btn { background:#2a2732; border-color:#484250; color:#eeeaf4; }
body.dark .chat-badge { border-color:#24212c; }
body.dark .chat-bubble { background:#35313e; color:#f2eef7; }
body.dark .chat-composer textarea { background:#2d2935; border-color:#4a4453; color:#f2eef7; }
@media (max-width:820px) {
  .chat-panel { width:min(100vw,420px); }
  .chat-backdrop { position:fixed; z-index:160; inset:0; display:block; background:rgba(20,20,30,.28); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .chat-backdrop.show { opacity:1; pointer-events:auto; }
  .chat-top-btn { padding:0 8px; }
  .chat-compose-row small { display:none; }
}

/* ---------- Peer-to-peer chat audio ---------- */
.chat-audio-tools { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:32px; }
.chat-audio-btn { border:1px solid #d8d3df; background:#fff; color:#574f63; border-radius:9px; padding:6px 9px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.chat-audio-btn:hover { background:#f4f1fb; border-color:#c9c2da; }
.chat-audio-clear-btn { color:#9b2c2c; border-color:#e6c5c5; }
.chat-audio-clear-btn:hover { background:#fff1f1; border-color:#db9999; }
.chat-audio-btn:disabled { opacity:.55; cursor:wait; }
.chat-audio-btn.recording { background:#fff0f0; border-color:#e26b6b; color:#a81f1f; animation:chat-record-pulse 1.2s ease-in-out infinite; }
.chat-record-state { margin-left:auto; color:#b42318; font-size:11px; font-weight:700; }
@keyframes chat-record-pulse { 50% { box-shadow:0 0 0 4px rgba(217,45,32,.10); } }
.chat-audio-bubble { min-width:240px; white-space:normal; }
.chat-audio-player { display:flex; align-items:center; gap:8px; min-width:0; }
.chat-audio-fetch { border:0; border-radius:16px; background:rgba(255,255,255,.8); color:#44359d; font-weight:800; padding:6px 10px; cursor:pointer; white-space:nowrap; }
.chat-message:not(.mine) .chat-audio-fetch { border:1px solid #d9d4e4; }
.chat-message.mine .chat-audio-fetch { color:#3e318f; }
.chat-audio-info { font-size:11px; font-weight:700; opacity:.85; white-space:nowrap; }
.chat-audio-status { display:block; margin-top:5px; font-size:9px; opacity:.72; line-height:1.25; }
.chat-audio-element { width:210px; max-width:100%; height:34px; }
body.dark .chat-audio-btn { background:#2d2935; color:#eeeaf4; border-color:#4a4453; }
body.dark .chat-audio-btn.recording { background:#4a2527; color:#ffd4d4; border-color:#8c4a4f; }
body.dark .chat-audio-clear-btn { color:#ffbaba; border-color:#70454a; }
body.dark .chat-audio-fetch { background:#f2eef9; color:#44359d; }

.chat-file-bubble { min-width:250px; max-width:min(360px,78vw); white-space:normal; }
.chat-file-card { display:grid; gap:7px; min-width:0; }
.chat-file-title { font-weight:800; overflow-wrap:anywhere; }
.chat-file-info { font-size:10px; opacity:.76; overflow-wrap:anywhere; }
.chat-file-preview { display:grid; place-items:center; max-width:100%; }
.chat-image-preview { display:block; max-width:100%; max-height:260px; object-fit:contain; border-radius:10px; background:rgba(255,255,255,.5); }
.chat-video-preview { width:100%; max-height:280px; border-radius:10px; background:#000; }
.chat-file-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.chat-file-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:1px solid rgba(68,53,157,.18); border-radius:16px; background:rgba(255,255,255,.78); color:#44359d; font-size:11px; font-weight:800; padding:6px 10px; }
.chat-file-link:hover { background:#fff; }
body.dark .chat-file-link { background:#f2eef9; color:#44359d; }
@media (max-width:600px) {
  .chat-file-bubble { min-width:210px; max-width:82vw; }
  .chat-image-preview { max-height:220px; }
}
@media (max-width:480px) {
  .chat-audio-btn span { display:none; }
  .chat-audio-btn { min-width:38px; justify-content:center; }
  .chat-audio-bubble { min-width:205px; }
  .chat-audio-element { width:180px; }
}

/* ---------- WhatsApp-style chat replies / private replies ---------- */
.chat-message-action {
  border:0;
  background:transparent;
  color:#7e7588;
  padding:0 3px;
  font-size:10px;
  cursor:pointer;
  font-weight:700;
}
.chat-message-action:hover { color:#5b4bd8; text-decoration:underline; }
.chat-message-action.private-action { color:#7b5f92; }
.chat-private-tag {
  display:inline-flex;
  align-items:center;
  gap:2px;
  border-radius:999px;
  padding:1px 5px;
  background:#efe8fb;
  color:#6d478b;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.chat-message.private .chat-bubble {
  box-shadow:inset 3px 0 0 #9b6ec4;
}
.chat-message.mine.private .chat-bubble {
  box-shadow:inset -3px 0 0 rgba(255,255,255,.55);
}
.chat-reply-quote {
  width:100%;
  display:grid;
  gap:2px;
  border:0;
  border-left:3px solid rgba(91,75,216,.58);
  border-radius:7px;
  background:rgba(255,255,255,.56);
  color:inherit;
  text-align:left;
  padding:6px 8px;
  margin:0 0 7px;
  cursor:pointer;
  min-width:0;
}
.chat-message.mine .chat-reply-quote {
  background:rgba(255,255,255,.14);
  border-left-color:rgba(255,255,255,.72);
}
.chat-reply-quote strong {
  font-size:10px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-reply-quote span {
  font-size:11px;
  line-height:1.25;
  opacity:.82;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-message-content { min-width:0; }
.chat-reply-context {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid #ddd7e8;
  border-left:4px solid #7162d9;
  border-radius:9px;
  padding:7px 8px 7px 10px;
  background:#f6f3fc;
  color:#433c4d;
}
.chat-reply-context[hidden] { display:none; }
.chat-reply-context.private {
  border-left-color:#8c5ba9;
  background:#f8f2fb;
}
.chat-reply-context-text {
  min-width:0;
  display:grid;
  gap:2px;
}
.chat-reply-context-text strong {
  font-size:11px;
  color:#5b4bd8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-reply-context.private .chat-reply-context-text strong { color:#784a94; }
.chat-reply-context-text span {
  font-size:11px;
  color:#766f7d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-reply-context > button {
  flex:0 0 auto;
  width:27px;
  height:27px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#6f6878;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.chat-reply-context > button:hover { background:#e9e4f3; }
.chat-message-highlight .chat-bubble {
  animation:chat-reply-highlight 1.25s ease;
}
@keyframes chat-reply-highlight {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-3px); box-shadow:0 0 0 4px rgba(91,75,216,.18); }
  45% { transform:translateX(2px); }
}
body.dark .chat-private-tag { background:#44364f; color:#e0bdf2; }
body.dark .chat-reply-context { background:#312c3a; border-color:#51495d; border-left-color:#8d7de8; color:#f0ecf5; }
body.dark .chat-reply-context.private { background:#352b3d; border-left-color:#b179cf; }
body.dark .chat-reply-context-text span { color:#bcb4c5; }
body.dark .chat-reply-quote { background:rgba(255,255,255,.06); }

@media (max-width:820px) {
  .chat-message { max-width:92%; }
  .chat-message-meta { flex-wrap:wrap; row-gap:2px; }
  .chat-message-action, .chat-delete-message { font-size:10px; padding:2px 4px; }
}

/* v3.8 chat deletion controls */
.chat-header > .chat-header-actions { display:flex; align-items:center; gap:8px; }
.chat-header .chat-clear-log-btn { width:auto; height:32px; border:1px solid #d9a9ae; background:#fff5f5; color:#a22934; border-radius:8px; padding:0 9px; font-size:12px; font-weight:700; cursor:pointer; }
.chat-header .chat-clear-log-btn:hover { background:#ffe9eb; }
.chat-header .chat-clear-log-btn:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width: 640px) { .chat-header .chat-clear-log-btn { padding:0 8px; font-size:11px; } }