/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #37352f; background: #fff; }
a { color: inherit; }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f7f6f3; }
#login-screen { text-align: center; }
#login-box { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); min-width: 320px; }
#login-box h2 { margin-bottom: 8px; font-size: 24px; }
#login-box p { color: #999; margin-bottom: 20px; font-size: 14px; }
#login-key { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; margin-bottom: 12px; }
#login-btn { width: 100%; padding: 10px; background: #2eaadc; color: #fff; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; }
#login-btn:hover { background: #2496c4; }

/* App layout */
#app { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar */
#sidebar { width: 260px; min-width: 260px; background: #f7f6f3; border-right: 1px solid #e8e5e0; display: flex; flex-direction: column; overflow: hidden; }
#sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 8px; }
#sidebar-header span { font-weight: 600; font-size: 14px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
#new-page-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: #999; padding: 2px 6px; border-radius: 4px; }
#new-page-btn:hover { background: #e8e5e0; color: #37352f; }
#page-search { margin: 0 10px 8px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; outline: none; }
#page-search:focus { border-color: #2eaadc; }
#page-tree { flex: 1; overflow-y: auto; padding: 0 4px 12px; }
.page-item { display: flex; align-items: center; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; position: relative; user-select: none; }
.page-item:hover { background: #e8e5e0; }
.page-item.active { background: #e8e5e0; font-weight: 500; }
.page-item .page-icon { margin-right: 6px; font-size: 16px; flex-shrink: 0; }
.page-item .page-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-item .page-toggle { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; color: #999; border-radius: 3px; flex-shrink: 0; }
.page-item .page-toggle:hover { background: #ddd; }
.page-item .page-add-child { display: none; width: 20px; height: 20px; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; color: #999; border-radius: 3px; flex-shrink: 0; }
.page-item:hover .page-add-child { display: flex; }
.page-item .page-add-child:hover { background: #ddd; }
.page-children { padding-left: 16px; }
.page-children.collapsed { display: none; }

/* Page drag in sidebar */
.page-item[draggable="true"] { cursor: grab; }
.page-item.drag-over-top { border-top: 2px solid #2eaadc; }
.page-item.drag-over-middle { background: #d3eef8; }
.page-item.drag-over-bottom { border-bottom: 2px solid #2eaadc; }

/* Main area */
#main-area { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
#empty-state { flex: 1; display: flex; align-items: center; justify-content: center; color: #999; font-size: 16px; }

/* Page editor */
#page-editor { flex: 1; max-width: 900px; width: 100%; margin: 0 auto; padding: 40px 60px 100px; }
#page-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
#page-icon-btn { background: none; border: none; font-size: 32px; cursor: pointer; padding: 4px; border-radius: 4px; line-height: 1; }
#page-icon-btn:hover { background: #f0f0f0; }
#page-title { flex: 1; font-size: 32px; font-weight: 700; border: none; outline: none; background: transparent; font-family: inherit; color: #37352f; }
#page-title::placeholder { color: #ccc; }
#page-actions { display: flex; gap: 4px; }
#page-actions button { background: none; border: none; font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: 4px; color: #999; }
#page-actions button:hover { background: #f0f0f0; }

/* Blocks container */
#blocks-container, #shared-blocks-container {
	outline: none;
	min-height: 200px;
	line-height: 1.6;
	font-size: 16px;
}

/* Block wrapper */
.block-wrapper {
	display: flex;
	align-items: flex-start;
	position: relative;
	padding: 2px 0 2px 28px;
}
.block-wrapper .block-handle {
	position: absolute;
	left: 0;
	top: 4px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	color: #ccc;
	font-size: 14px;
	border-radius: 3px;
	opacity: 0;
	transition: opacity 0.15s;
	user-select: none;
}
.block-wrapper:hover > .block-handle { opacity: 1; }
.block-wrapper .block-handle:hover { background: #f0f0f0; color: #999; }
.block-content { flex: 1; min-height: 1.6em; padding: 2px 4px; border-radius: 3px; outline: none; position: relative; }
.block-content:focus { background: transparent; }

/* Placeholder */
.block-wrapper.has-cursor > .block-content.is-empty::before {
	content: "Type '/' for commands...";
	color: #ccc;
	position: absolute;
	pointer-events: none;
	top: 2px;
	left: 4px;
}

/* Block type styles */
.block-wrapper[data-type="heading1"] > .block-content { font-size: 28px; font-weight: 700; line-height: 1.3; margin-top: 24px; }
.block-wrapper[data-type="heading2"] > .block-content { font-size: 22px; font-weight: 600; line-height: 1.3; margin-top: 18px; }
.block-wrapper[data-type="heading3"] > .block-content { font-size: 18px; font-weight: 600; line-height: 1.3; margin-top: 14px; }
.block-wrapper[data-type="heading1"]:first-child > .block-content,
.block-wrapper[data-type="heading2"]:first-child > .block-content,
.block-wrapper[data-type="heading3"]:first-child > .block-content { margin-top: 0; }

/* Lists */
.block-wrapper[data-type="bullet_list"] > .block-content::after { content: "•"; position: absolute; left: -16px; top: 2px; color: #37352f; }
.block-wrapper[data-type="bullet_list"] > .block-content { margin-left: 20px; }
.block-wrapper[data-type="numbered_list"] > .block-content { margin-left: 0; }
.list-number { flex-shrink: 0; min-width: 20px; color: #37352f; user-select: none; font-size: 16px; padding-top: 2px; }

/* Todo */
.todo-checkbox { flex-shrink: 0; width: 16px; height: 16px; margin: 5px 6px 0 0; cursor: pointer; accent-color: #2eaadc; }
.block-wrapper[data-type="todo"].checked > .block-content { text-decoration: line-through; color: #999; }

/* Toggle */
.toggle-icon { flex-shrink: 0; width: 20px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; user-select: none; color: #999; transition: transform 0.15s; }
.toggle-icon.open { transform: rotate(90deg); }

/* Quote */
.block-wrapper[data-type="quote"] > .block-content { border-left: 3px solid #37352f; padding-left: 16px; color: #37352f; }

/* Callout */
.block-wrapper[data-type="callout"] { background: #f7f6f3; border-radius: 4px; padding: 12px 12px 12px 8px; }
.block-wrapper[data-type="callout"] > .block-content { padding-left: 8px; }

/* Divider */
.block-wrapper[data-type="divider"] { padding: 8px 0; }
.block-wrapper[data-type="divider"] > .block-content { min-height: 0; }
.block-wrapper[data-type="divider"] hr { border: none; border-top: 1px solid #e8e5e0; }

/* Code block */
.code-block-wrapper { background: #f7f6f3; border-radius: 4px; padding: 8px; width: 100%; }
.code-language { background: #e8e5e0; border: none; padding: 2px 6px; font-size: 12px; border-radius: 3px; margin-bottom: 6px; cursor: pointer; outline: none; }
.code-block-wrapper pre { margin: 0; overflow-x: auto; }
.code-block-wrapper code {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 14px;
	line-height: 1.5;
	display: block;
	outline: none;
	white-space: pre;
	padding: 4px;
}

/* Image */
.image-block img { max-width: 100%; border-radius: 4px; cursor: default; }
.image-block { text-align: center; padding: 8px 0; }
.image-upload-placeholder { border: 2px dashed #ddd; border-radius: 4px; padding: 40px; text-align: center; color: #999; cursor: pointer; }
.image-upload-placeholder:hover { border-color: #2eaadc; color: #2eaadc; }

/* File */
.file-block { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f7f6f3; border-radius: 4px; }
.file-block a { text-decoration: none; color: #2eaadc; }
.file-block a:hover { text-decoration: underline; }

/* Page link */
.page-link-block { padding: 6px 12px; background: #f7f6f3; border-radius: 4px; cursor: pointer; }
.page-link-block:hover { background: #e8e5e0; }

/* Table */
.table-wrapper { width: 100%; overflow-x: auto; }
.table-wrapper table { border-collapse: collapse; width: 100%; }
.table-wrapper th, .table-wrapper td {
	border: 1px solid #e8e5e0;
	padding: 6px 10px;
	text-align: left;
	font-size: 14px;
	min-width: 80px;
	outline: none;
}
.table-wrapper th { background: #f7f6f3; font-weight: 600; }
.table-controls { display: flex; gap: 4px; margin-top: 4px; }
.table-controls button {
	background: #f7f6f3;
	border: 1px solid #e8e5e0;
	padding: 2px 8px;
	font-size: 12px;
	border-radius: 3px;
	cursor: pointer;
}
.table-controls button:hover { background: #e8e5e0; }

/* Math */
.math-block { padding: 8px; }
.math-preview { padding: 8px 0; font-size: 18px; cursor: pointer; min-height: 1.6em; }
.math-input {
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 14px;
	padding: 8px;
	background: #f7f6f3;
	border-radius: 4px;
	outline: none;
	display: none;
	white-space: pre-wrap;
}
.math-block.editing .math-preview { display: none; }
.math-block.editing .math-input { display: block; }

/* Nesting depth indentation */
.block-wrapper[data-depth="1"] { padding-left: 52px; }
.block-wrapper[data-depth="2"] { padding-left: 76px; }
.block-wrapper[data-depth="3"] { padding-left: 100px; }
.block-wrapper[data-depth="4"] { padding-left: 124px; }

/* Drag and drop */
.block-wrapper.dragging { opacity: 0.4; }
.block-wrapper.drag-above { border-top: 2px solid #2eaadc; }
.block-wrapper.drag-below { border-bottom: 2px solid #2eaadc; }

/* Inline formatting */
.block-content .inline-code, code.inline-code {
	background: rgba(135,131,120,0.15);
	padding: 2px 4px;
	border-radius: 3px;
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 85%;
	color: #eb5757;
}
.block-content a[href], .block-content a[data-page-link] {
	color: #2eaadc;
	text-decoration: underline;
	cursor: pointer;
}

/* Comment highlight */
mark.comment-mark {
	background: #fef3c7;
	padding: 1px 0;
	border-radius: 2px;
	cursor: pointer;
}

/* Comments panel */
#comments-panel {
	width: 300px;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: transparent;
}
#comments-panel-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 4px 8px;
}
#comments-panel-header h3 { display: none; }
#comments-panel-header button { background: none; border: none; font-size: 16px; cursor: pointer; color: #999; }
#comments-list { flex: 1; overflow-y: auto; padding: 8px; }
.comment-thread { margin-bottom: 12px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; }
.comment-thread.resolved { opacity: 0.45; }
.comment-thread.resolved::after { content: "Resolved"; display: block; text-align: right; font-size: 10px; color: #999; padding: 2px 8px 4px; }
.comment-thread.highlight { box-shadow: 0 0 0 2px #2eaadc, 0 2px 8px rgba(46,170,220,0.15); }
.comment-item { padding: 8px 10px; border-bottom: 1px solid #f5f5f5; }
.comment-item:last-child { border-bottom: none; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.comment-author { font-weight: 600; font-size: 12px; color: #555; }
.comment-time { font-size: 10px; color: #bbb; }
.comment-quote { font-size: 11px; color: #999; font-style: italic; margin-bottom: 4px; padding: 3px 6px; background: #fef3c7; border-radius: 3px; cursor: pointer; }
.comment-quote:hover { background: #fde68a; }
.comment-text { font-size: 13px; line-height: 1.4; }
.comment-actions { margin-top: 4px; }
.comment-actions button { background: none; border: none; font-size: 11px; color: #2eaadc; cursor: pointer; padding: 0; }
.comment-actions button:hover { text-decoration: underline; }
.comment-reply-form { padding: 8px 12px; border-top: 1px solid #f0f0f0; }
.comment-reply-form textarea {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 13px;
	font-family: inherit;
	resize: none;
	min-height: 50px;
	outline: none;
}
.comment-reply-form textarea:focus { border-color: #2eaadc; }
.comment-reply-form button {
	margin-top: 4px;
	background: #2eaadc;
	color: #fff;
	border: none;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
}

/* Floating comment button */
#comment-float-btn {
	position: fixed;
	background: #2eaadc;
	color: #fff;
	border: none;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#comment-float-btn:hover { background: #2496c4; }

/* Shares panel */
#shares-panel {
	width: 340px;
	min-width: 340px;
	border-left: 1px solid #e8e5e0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
}
#shares-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid #e8e5e0;
}
#shares-panel-header h3 { font-size: 14px; font-weight: 600; }
#shares-panel-header button { background: none; border: none; font-size: 20px; cursor: pointer; color: #999; }
#shares-list { flex: 1; overflow-y: auto; padding: 12px; }
.share-item { display: flex; align-items: center; justify-content: space-between; padding: 8px; border: 1px solid #e8e5e0; border-radius: 4px; margin-bottom: 8px; font-size: 13px; }
.share-info { flex: 1; }
.share-info .share-alias { font-weight: 600; }
.share-info .share-type { color: #999; font-size: 12px; }
.share-link { color: #2eaadc; cursor: pointer; font-size: 12px; margin: 0 8px; word-break: break-all; }
.share-delete { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 14px; }
#new-share-form { padding: 12px; border-top: 1px solid #e8e5e0; display: flex; gap: 6px; flex-wrap: wrap; }
#share-alias { flex: 1; min-width: 100px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
#share-key-type { padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
#create-share-btn { background: #2eaadc; color: #fff; border: none; padding: 6px 14px; border-radius: 4px; font-size: 13px; cursor: pointer; }
#create-share-btn:hover { background: #2496c4; }

/* Slash menu */
.popup-menu {
	position: fixed;
	background: #fff;
	border: 1px solid #e8e5e0;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	z-index: 1000;
	max-height: 300px;
	overflow-y: auto;
	min-width: 220px;
}
.slash-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 14px;
}
.slash-item:hover, .slash-item.active { background: #f0f0f0; }
.slash-item .slash-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #f7f6f3; border-radius: 4px; font-size: 14px; flex-shrink: 0; }
.slash-item .slash-label { flex: 1; }

/* Emoji picker */
#emoji-picker {
	position: fixed;
	background: #fff;
	border: 1px solid #e8e5e0;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	z-index: 1001;
	padding: 8px;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
	max-height: 260px;
	overflow-y: auto;
	width: 280px;
}
.emoji-item {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 4px;
	font-size: 18px;
}
.emoji-item:hover { background: #f0f0f0; }

/* Page link modal */
#page-link-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
}
#page-link-modal-content {
	background: #fff;
	border-radius: 8px;
	padding: 16px;
	width: 400px;
	max-height: 400px;
	overflow-y: auto;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
#page-link-search {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	margin-bottom: 8px;
	outline: none;
}
#page-link-search:focus { border-color: #2eaadc; }
.page-link-item {
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 4px;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.page-link-item:hover { background: #f0f0f0; }

/* Shared page */
.shared-page { background: #fff; }
#shared-app { max-width: 900px; margin: 0 auto; padding: 40px 60px 100px; position: relative; }
#shared-header { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
#shared-page-icon { font-size: 32px; }
#shared-page-title { font-size: 32px; font-weight: 700; flex: 1; }
#shared-comments-btn { background: none; border: none; font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: 4px; color: #999; }
#shared-comments-btn:hover { background: #f0f0f0; }
#shared-editor-container { position: relative; }
#shared-blocks-container { outline: none; min-height: 200px; line-height: 1.6; font-size: 16px; }

/* Shared page overrides - comments panel floats on right */
.shared-page #comments-panel {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
	box-shadow: -2px 0 8px rgba(0,0,0,0.1);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* Selection */
::selection { background: rgba(46,170,220,0.2); }