:root {
	/* MES789 Sovereign Color Blueprint — Steel Velvet UI System */
	--csb-bg: #0C0C0E;        /* Deep Void Black — พื้นหลังหลัก */
	--csb-card: #121212;      /* Sovereign Charcoal — พื้นผิวการ์ด/โมดัล/ลิ้นชัก (เลเยอร์ 2) */
	--csb-ink: #E0E0E0;       /* Muted Ivory — ตัวอักษรเนื้อหาหลัก */
	--csb-secondary: #8E8E93; /* Slate Platinum — ตัวอักษรรอง/คำอธิบาย/label ทั่วไป (ไม่ผูกกับฝั่งซ้าย-ขวา) */
	--csb-teal: #8B0000;      /* Sacred Vermilion — ปุ่ม/ลิงก์/จุดเน้นวิกฤต */
	--csb-teal-dark: #6E0000; /* Vermilion เข้มขึ้น — hover state */
	--csb-on-accent: #FFFFFF; /* สีตัวอักษร/ไอคอนที่วางทับบนพื้นสีเน้นหลัก (บับเบิลขวา/ปุ่ม CTA) */
	--csb-coral: #D4AF37;     /* Imperial Gold — ป้ายยศ/ไฮไลต์สำคัญ */
	--csb-panel: #1C1C1E;     /* Charcoal Shield — แผงรอง/นำทาง (เลเยอร์ 3) */
	--csb-border: #2C2C2E;    /* Obsidian Border — เส้นแบ่งเขต */
	/* [ตามที่ขอ — แยกสีตามความหมายให้จำได้จากสี] ป้าย/สถานะเฉพาะทาง แต่ละอย่างมีสีของตัวเอง ไม่ใช้สีร่วมกัน */
	--csb-pin: #D4AF37;       /* สีป้าย "📌 ปักหมุด" */
	--csb-origin: #8B0000;    /* สีป้าย "📌 ต้นเรื่อง" (โพสต์ราก) */
	--csb-lineage: #D2A679;   /* สีข้อความ "🌱 แตกมาจาก: ..." */
	--csb-branch: #2FBF9F;    /* สีปุ่ม/ไอคอน "ต่อกิ่งใหม่" / "แผนผัง" */
	--csb-dissolved: #7C7C82; /* สีโพสต์ที่เคยถูกละลาย */
	--csb-revision: #5C93AC;  /* สีป้ายประวัติการแก้ไข */
}

#csb-feed-container {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: var(--csb-bg);
	color: var(--csb-ink);
	padding: 16px 0;
}

/* [เฟส A+B — 3 คอลัมน์ ตามที่ขอ] มือถือ: เห็นแค่คอลัมน์กลาง (บอร์ดเดิม) แถบซ้าย-ขวาซ่อนสนิท
   จอใหญ่ (แท็บเล็ต/เดสก์ท็อป ตั้งแต่ 1024px ขึ้นไป): เห็นครบ 3 คอลัมน์ */
.csb-3col-layout {
	display: block;
	max-width: 100%;
}
.csb-sidebar-left,
.csb-sidebar-right {
	display: none; /* ซ่อนบนมือถือเป็นค่าเริ่มต้น */
}
@media (min-width: 1024px) {
	.csb-3col-layout {
		display: grid;
		grid-template-columns: 260px minmax(0, 680px) 260px;
		gap: 20px;
		justify-content: center;
		align-items: start;
		max-width: 1240px;
		margin: 0 auto;
	}
	.csb-sidebar-left,
	.csb-sidebar-right {
		display: block;
		position: sticky;
		top: 16px;
		background: var(--csb-card);
		border-radius: 14px;
		border: 1px solid var(--csb-border);
		box-shadow: 0 1px 3px rgba(0,0,0,0.06);
		max-height: calc(100vh - 32px);
		overflow-y: auto;
	}
}
.csb-sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px;
	font-weight: 700;
	font-size: 13px;
	border-bottom: 1px solid var(--csb-border);
}
.csb-room-add-btn {
	background: var(--csb-teal);
	color: var(--csb-on-accent);
	border: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.csb-room-list { padding: 6px; }
.csb-room-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
	color: var(--csb-ink);
}
.csb-room-item:hover { background: var(--csb-panel); }
.csb-room-item.csb-room-active { background: color-mix(in srgb, var(--csb-teal) 12%, transparent); font-weight: 700; color: var(--csb-teal); }
.csb-room-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.csb-room-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--csb-secondary);
	cursor: pointer;
}
.csb-room-group-body { display: none; padding-left: 8px; }
.csb-room-group-body.csb-room-group-open { display: block; }
.csb-sidebar-placeholder {
	padding: 20px 14px;
	text-align: center;
	color: var(--csb-secondary);
	font-size: 12px;
}

/* [เฟส C — แถบขวา ปุ่มลัดกำหนดเอง] */
.csb-sidebar-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
}
.csb-sidebar-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--csb-panel);
	color: var(--csb-ink);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}
.csb-sidebar-btn:hover { background: color-mix(in srgb, var(--csb-teal) 12%, transparent); }
.csb-sidebar-btn-img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }

/* ========== FEED HEADER ========== */
.csb-feed-header {
	padding: 16px;
	text-align: center;
}

.csb-new-post-btn {
	padding: 10px 20px;
	background: var(--csb-teal);
	color: var(--csb-on-accent);
	border: none;
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.2s;
	text-decoration: none;
	display: inline-block;
}
/* [ตำแหน่งปุ่มสร้างโพสต์ ⊕ — แก้รอบ 3 ตามที่ขอ] ปักไว้ถาวรที่ระดับเดียวกับชื่อผู้เขียนโพสต์แรก
   ฝั่งขวาสุดของจอ (คนละฝั่งกับชื่อผู้เขียนที่อยู่ซ้าย) — ค่า "top" ถูกคำนวณและใส่แบบ inline โดย JS
   ในฟังก์ชัน alignFabToFirstPost() (ไฟล์ assets/js/frontend.js) เพราะตำแหน่งจริงขึ้นกับความสูง
   ของแอดมินบาร์/หัวเว็บที่ไม่คงที่ ถ้าจะขยับเอง ไปแก้ค่า VERTICAL_NUDGE_PX ในไฟล์ JS แทนที่นี่ */
.csb-new-post-circle {
	position: fixed;
	right: 16px;
	bottom: 24px;
	z-index: 500;
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--csb-teal);
	color: var(--csb-on-accent);
	border: none;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	transition: transform 0.15s, opacity 0.25s ease, bottom 0.2s ease;
}
.csb-new-post-circle:hover { transform: scale(1.08); }

/* [ตามที่ขอ — ข้อ 6] ปุ่มอัลบัมออนไลน์วางแถวเดียวกับปุ่ม + ในมุมล่างขวา ไม่ใช่ด้านบนอีกต่อไป */
.csb-cloud-album-circle {
	bottom: 82px;
	width: 38px;
	height: 38px;
	font-size: 18px;
	background: #8B5CF6;
}

/* [ซ่อน/โชว์ตามทิศทางเลื่อนจอ] เลื่อนหายขึ้นด้านบน แล้วเลื่อนกลับตำแหน่งเดิมทันทีที่เลื่อนจอขึ้น */
.csb-new-post-circle.csb-fab-hidden {
	transform: translateY(90px);
	opacity: 0;
	pointer-events: none;
}

.csb-new-post-btn:hover {
	background: var(--csb-teal-dark);
}

/* ========== MODAL (คอมโพสเซอร์เต็มจอ) ==========
   หน้าต่างสร้างโพสต์/ตอบกลับ ขยายเต็มหน้าจอทุกอุปกรณ์ตามสเปกใหม่
   ใช้ 100dvh (dynamic viewport) เพื่อให้พอดีจอมือถือแม้ตอนแป้นพิมพ์เปิด */
.csb-modal {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	align-items: stretch;
	justify-content: stretch;
	padding: 0;
}

/* [รูปลักษณ์ทั้งระบบให้เหมือนกัน] เดิมกล่องนี้พื้นขาวธรรมดา เปลี่ยนให้เป็นโทนมืดแบบเดียวกับ
   กล่องโพสต์พื้นหลังของ BuddyPress (mes789-bg-post) ที่ขอให้เหมือนกันทั้งเว็บ */
.csb-modal-content {
	background: linear-gradient(180deg, #232327 0%, #1a1a1d 100%);
	color: #f2f2f2;
	border-radius: 0;
	max-width: 100%;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: none;
}

/* หัวหน้าต่างล็อกติดบน ส่วนฟอร์มเลื่อนได้ภายในตัวเอง */
.csb-modal-content .csb-modal-header {
	flex: 0 0 auto;
	position: sticky;
	top: 0;
	background: #232327;
	z-index: 2;
}
.csb-modal-content .csb-form {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 32px;
}

/* ล็อกไม่ให้ฟีดด้านหลังเลื่อนตามขณะคอมโพสเซอร์เปิดอยู่ (JS ใส่/ถอด class นี้ที่ body) */
body.csb-composer-open {
	overflow: hidden;
}

.csb-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	border-bottom: 1px solid #333;
}

.csb-modal-header h2 {
	margin: 0;
	font-size: 18px;
	color: #f2f2f2;
}

/* [เครื่องมือวินิจฉัย — เช็คเวอร์ชันที่ทำงานจริงได้จากหน้าเว็บเลย ไม่ต้องเข้าหลังบ้าน] */
.csb-version-badge {
	font-size: 10px;
	font-weight: 400;
	color: #888;
	vertical-align: middle;
	margin-left: 6px;
}

/* [แก้บั๊ก] แจ้งเตือนตอนสร้างโพสต์ต่อจากกิ่งที่กำลังดูอยู่ */
.csb-branch-notice {
	background: color-mix(in srgb, var(--csb-teal) 15%, transparent);
	color: var(--csb-coral);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 16px;
	border-bottom: 1px solid #333;
}

/* ปุ่มปิด — วงกลมขาว ตามสไตล์กล่องโพสต์พื้นหลัง */
.csb-modal-close {
	background: #2C2C2E;
	color: #E0E0E0;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	line-height: 1;
	font-size: 20px;
	cursor: pointer;
}

/* [ตามที่ขอ — ข้อ 4.2, 4.3] ปุ่ม "เรียบร้อย" โผล่เฉพาะตอนกำลังพิมพ์ */
.csb-typing-done-btn {
	background: var(--csb-teal);
	color: var(--csb-on-accent);
	border: none;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	margin-right: 8px;
}

/* [ตามที่ขอ — ข้อ 4.4] กล่องแจ้งโพสต์สำเร็จ + ตัวเลือกแชร์/ปิด */
.csb-post-success-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #1c1c1e;
	color: #fff;
	padding: 10px 14px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
	z-index: 10000;
	animation: csbPop 0.25s ease-out;
}
.csb-post-success-toast button {
	background: rgba(255,255,255,0.15);
	border: none;
	color: #fff;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.csb-post-success-toast button:hover { background: rgba(255,255,255,0.25); }

.csb-form {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: #f2f2f2;
}

.csb-form input,
.csb-form textarea,
.csb-form select {
	padding: 10px 12px;
	border: 1px solid #3a3a3d;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	background: #2a2a2c;
	color: #eee;
}
.csb-form input::placeholder,
.csb-form textarea::placeholder {
	color: #8a8a8d;
}
.csb-form input:focus,
.csb-form textarea:focus,
.csb-form select:focus {
	outline: none;
	border-color: var(--csb-teal);
}
.csb-form select option {
	background: #2a2a2c;
	color: #eee;
}

.csb-form textarea {
	resize: vertical;
	min-height: 120px;
}

.csb-form-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.csb-btn {
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.csb-btn-primary {
	background: var(--csb-teal);
	color: var(--csb-on-accent);
}

.csb-btn-primary:hover {
	background: var(--csb-teal-dark);
}

.csb-btn-secondary {
	background: #3a3a3d;
	color: #f2f2f2;
}

.csb-btn-secondary:hover {
	background: #4a4a4d;
}

/* ========== FEED ========== */
.csb-feed {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 12px 16px;
}

.csb-loading,
.csb-error {
	text-align: center;
	padding: 32px 16px;
	color: var(--csb-secondary);
	font-size: 14px;
}

/* ========== POSTS (LINE BUBBLE STYLE) ========== */
.csb-post {
	display: flex;
	flex-direction: column;
	gap: 8px;
	animation: slideIn 0.3s ease-out;
}

/* [แก้ข้อ 4] ป้ายที่มา/หมวดหมู่ — ตอนนี้เป็นแถวเล็กๆ ที่ไหลตามฝั่งซ้าย-ขวาของบับเบิล
   (เดิมเป็นกล่องเต็มความกว้างลอยแยกจากชื่อผู้โพสต์ ทำให้ดูเหมือนคนละบรรทัดกัน) */
.csb-post-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 2px 0;
}
.csb-post.csb-right .csb-post-badges { justify-content: flex-end; }
.csb-post.csb-left .csb-post-badges { justify-content: flex-start; }

.csb-origin-badge {
	font-size: 11px;
	color: var(--csb-origin);
	font-weight: 600;
}
.csb-lineage-badge {
	font-size: 11px;
	color: var(--csb-lineage);
	font-weight: 600;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* [ก้อน 1] ป้ายหมวดหมู่ (ชิปเล็ก สีตามหมวด) — ข้อ 3 */
.csb-cat-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 999px;
	color: var(--csb-cat-color, var(--csb-secondary));
	border: 1px solid var(--csb-cat-color, var(--csb-secondary));
	white-space: nowrap;
	/* [เชื่อมระบบสำหรับคุณ] ตอนนี้เป็น <button> กดได้ ต้องรีเซ็ตสไตล์ default ของปุ่ม */
	background: none;
	cursor: pointer;
	position: relative;
	font-family: inherit;
}
.csb-cat-badge:hover { opacity: 0.75; }

/* [ภาพพื้นหลังป้ายกำกับ] ตัวเลือกใหม่ — แทนที่จะเป็นแบบขอบสีโปร่งใสอย่างเดียว
   ถ้าตั้งรูปพื้นหลังไว้ในหน้าตั้งค่าหมวดหมู่ ป้ายจะโชว์เป็นรูปแทน พร้อมฟิล์มมืดบางๆ
   คลุมไว้เสมอเพื่อให้ตัวอักษรสีขาวอ่านออกได้ไม่ว่าเป็นรูปสว่างหรือมืด */
.csb-cat-badge.csb-cat-badge-has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-color: transparent;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.65);
	position: relative;
	z-index: 0;
}
.csb-cat-badge.csb-cat-badge-has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(0,0,0,0.35);
	z-index: -1;
}
.csb-follow-toast {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	background: #222;
	color: #fff;
	font-size: 10px;
	padding: 3px 8px;
	border-radius: 6px;
	white-space: nowrap;
	animation: csbToastPop 1.5s ease forwards;
	pointer-events: none;
}
@keyframes csbToastPop {
	0% { opacity: 0; transform: translateX(-50%) translateY(4px); }
	15% { opacity: 1; transform: translateX(-50%) translateY(0); }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

/* [ก้อน 1] ขอบสีบางๆ ตามหมวด รอบบับเบิลเนื้อหา (ข้อ 5) — แค่ขอบ ไม่มีพื้นขาว
   ใช้ box-shadow แทน border เพื่อไม่ให้ไปกระทบ layout/ความกว้างของบับเบิลเดิม
   และรองรับทุกเบราว์เซอร์ (ไม่พึ่ง color-mix ที่เบราว์เซอร์เก่าไม่รู้จัก) */
/* [ก้อน 4] โพสต์ที่ถูกละลาย (dissolved) — จางลง เนื้อหาเป็นข้อความแจ้งเตือนแทน ไม่ใช่กล่องพูดปกติ */
.csb-post.csb-post-is-dissolved { opacity: 0.55; }
.csb-post-dissolved-notice {
	font-style: italic;
	color: var(--csb-dissolved);
	background: var(--csb-panel);
	border: 1px dashed var(--csb-dissolved);
}

.csb-post.csb-has-cat-color .csb-post-content {
	box-shadow: 0 0 0 1.5px var(--csb-cat-color, var(--csb-secondary));
}

/* [ก้อน 3] ปุ่ม "ดูที่มา / แผนผังทั้งหมด" บนโพสต์ที่แตกกิ่งมา */
.csb-lineage-btn {
	background: none;
	border: 1px solid var(--csb-cat-color, var(--csb-branch));
	color: var(--csb-cat-color, var(--csb-branch));
	font-size: 11px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}
.csb-lineage-btn:hover { opacity: 0.8; }

/* [แก้ตาม UX] "ต่อกิ่งใหญ่" ย้ายมาอยู่ติดชื่อผู้เขียนแล้ว (แยกจากกลุ่มปุ่มตอบกลับ/แตกกิ่งด้านล่าง
   เพราะเป็นคนละความหมายกัน) — ดันไปชิดขอบตรงข้ามกับอวาตาร์เสมอ ไม่ว่าโพสต์จะอยู่ฝั่งไหน */
.csb-continue-branch-btn {
	background: var(--csb-cat-color, var(--csb-branch));
	border: none;
	color: var(--csb-on-accent);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}
.csb-continue-branch-btn:hover { opacity: 0.85; }
.csb-post.csb-left .csb-continue-branch-btn { margin-left: auto; }
.csb-post.csb-right .csb-continue-branch-btn { margin-right: auto; }

/* [ก้อน 3] กล่องแสดงรายชื่อกิ่ง / แผนผังสายเลือด (เปิดตอนกดปุ่มเท่านั้น) */
.csb-fork-list-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 9999;
}
.csb-fork-list-inner {
	background: var(--csb-card);
	width: 100%;
	max-width: 500px;
	max-height: 70vh;
	overflow-y: auto;
	border-radius: 16px 16px 0 0;
	padding: 16px;
}
@media (min-width: 600px) {
	.csb-fork-list-modal { align-items: center; }
	.csb-fork-list-inner { border-radius: 16px; }
}

/* [แก้บั๊ก — แทนที่ window.prompt() ที่ตัดข้อความ] กล่องเลือกเหตุผลยุติคอมเมนต์ โชว์ครบทุกข้อเสมอ */
.csb-reason-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 9999;
}
.csb-reason-modal-inner {
	background: var(--csb-card);
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	overflow-y: auto;
	border-radius: 16px 16px 0 0;
	padding: 16px;
}
@media (min-width: 600px) {
	.csb-reason-modal { align-items: center; }
	.csb-reason-modal-inner { border-radius: 16px; }
}
.csb-reason-modal-head {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 12px;
}
.csb-reason-modal-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}
.csb-reason-option {
	text-align: left;
	background: var(--csb-panel);
	border: 1px solid var(--csb-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	cursor: pointer;
	line-height: 1.4;
}
.csb-reason-option:hover { background: color-mix(in srgb, var(--csb-teal) 10%, transparent); border-color: var(--csb-teal); }
.csb-reason-modal-hard {
	border-top: 1px solid var(--csb-border);
	padding-top: 10px;
	margin-bottom: 10px;
}
.csb-reason-hard-btn {
	width: 100%;
	background: rgba(231,76,60,0.1);
	border: 1px solid #e74c3c;
	color: #e74c3c;
	border-radius: 8px;
	padding: 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.csb-reason-hard-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
/* [ฟอร์ม 4 คำถามก่อนลบ — ตามที่ขอ] */
.csb-four-q-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}
.csb-four-q-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 1.5;
	background: var(--csb-panel);
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
}
.csb-four-q-item input {
	margin-top: 2px;
	flex-shrink: 0;
}
.csb-reason-modal-cancel {
	width: 100%;
	background: none;
	border: none;
	color: var(--csb-secondary);
	padding: 8px;
	font-size: 13px;
	cursor: pointer;
}

/* [ระบบ "ละลาย" ตัวจริง — ประวัติการแก้ไข] ใช้กล่อง modal เดียวกับแผนผังสายเลือด แค่เนื้อหาข้างในต่าง */
.csb-revisions-btn {
	background: none;
	border: none;
	color: var(--csb-revision);
	font-size: 11px;
	cursor: pointer;
	padding: 0;
}
.csb-revisions-btn:hover { color: var(--csb-revision); opacity: 0.8; }

/* [ปุ่ม "คำตอบมีประโยชน์" — เฉพาะคนที่ถูกแบน/จำกัดสิทธิ์] เด่นนิดหน่อยให้รู้ว่ากดแล้วช่วยได้จริง */
.csb-helpful-btn {
	background: color-mix(in srgb, var(--csb-coral) 15%, transparent);
	border: 1px solid var(--csb-coral);
	color: var(--csb-coral);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	cursor: pointer;
}
.csb-helpful-btn:hover { background: color-mix(in srgb, var(--csb-coral) 30%, transparent); }
.csb-helpful-btn:disabled { opacity: 0.7; cursor: default; }

.csb-revision-item {
	padding: 10px 0;
	border-bottom: 1px solid var(--csb-border);
}
.csb-revision-item:last-child { border-bottom: none; }
.csb-revision-meta {
	font-size: 11px;
	color: var(--csb-secondary);
	margin-bottom: 4px;
}
.csb-revision-title {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 4px;
}
.csb-revision-content {
	font-size: 13px;
	color: var(--csb-secondary);
	white-space: pre-wrap;
}

/* [กฎการยุติ 6 ข้อ] ตัวเลือกเหตุผลก่อนกด "ยุติประเด็นนี้" — บังคับเลือกก่อนถึงจะกดได้จริง */
.csb-dissolve-reason {
	display: block;
	width: 100%;
	margin-bottom: 6px;
	padding: 6px 8px;
	border-radius: 6px;
	border: 1px solid var(--csb-border);
	font-size: 12px;
}
.csb-fork-list-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 12px;
	color: var(--csb-ink);
}
.csb-fork-list-close {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--csb-secondary);
}
.csb-fork-list-item {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	border-radius: 10px;
	margin-bottom: 6px;
	background: var(--csb-panel);
	text-decoration: none;
	color: var(--csb-ink);
	font-weight: 600;
}
.csb-fork-list-author {
	font-size: 11px;
	font-weight: 400;
	color: var(--csb-secondary);
	margin-top: 2px;
}
/* แผนผังสายเลือด: ห่วงโซ่ต้นตอ → ปัจจุบัน */
.csb-tree-chain {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 10px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--csb-border);
}
.csb-tree-node {
	font-size: 13px;
	color: var(--csb-teal-dark, #6E0000);
	text-decoration: none;
	font-weight: 600;
}
.csb-tree-current {
	color: var(--csb-ink);
	pointer-events: none;
}
.csb-tree-arrow { color: var(--csb-secondary); font-size: 12px; }
.csb-tree-siblings-head {
	font-size: 13px;
	font-weight: 600;
	color: var(--csb-secondary);
	margin: 8px 0;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Right bubbles (odd posts) */
.csb-post.csb-right {
	align-items: flex-end;
}

.csb-post.csb-right .csb-post-header,
.csb-post.csb-right .csb-post-title,
.csb-post.csb-right .csb-post-content,
.csb-post.csb-right .csb-post-actions {
	text-align: right;
	margin-left: auto;
	margin-right: 0;
	max-width: 85%;
}

.csb-post.csb-right .csb-post-header {
	flex-direction: row-reverse;
	gap: 8px;
}

.csb-post.csb-right .csb-post-title,
.csb-post.csb-right .csb-post-content {
	background: var(--csb-teal);
	color: var(--csb-on-accent);
	padding: 12px 14px;
	border-radius: 16px 2px 16px 16px;
	word-wrap: break-word;
}

/* Left bubbles (even posts) */
.csb-post.csb-left {
	align-items: flex-start;
}

.csb-post.csb-left .csb-post-header,
.csb-post.csb-left .csb-post-title,
.csb-post.csb-left .csb-post-content,
.csb-post.csb-left .csb-post-actions {
	text-align: left;
	margin-right: auto;
	margin-left: 0;
	max-width: 85%;
}

.csb-post.csb-left .csb-post-header {
	flex-direction: row;
	gap: 8px;
}

.csb-post.csb-left .csb-post-title,
.csb-post.csb-left .csb-post-content {
	background: var(--csb-card);
	color: var(--csb-ink);
	border: 1.5px solid var(--csb-border);
	padding: 12px 14px;
	border-radius: 2px 16px 16px 16px;
	word-wrap: break-word;
}

.csb-post-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
}

.csb-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--csb-panel);
	flex-shrink: 0;
	overflow: hidden;
}

.csb-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csb-avatar-link {
	display: inline-flex;
	text-decoration: none;
}

.csb-post-meta {
	display: flex;
	gap: 6px;
	align-items: center;
}

.csb-author-name {
	font-weight: 600;
	display: block;
}

/* [ตามที่ขอ — เห็นของตัวเองเด่นชัดกว่าคนอื่น] ชื่อออกสีเน้น + กรอบซ้ายบางๆ ให้สังเกตง่ายในฟีดยาวๆ
   [ปรับตามธีม MES789 Sovereign] จุดนี้ใช้สีทอง (Imperial Gold #D4AF37) ตรงๆ แทนการอ้างอิงสีเน้นหลัก
   ของบอร์ด (--csb-accent-color) เพราะสีเน้นหลักเป็นสีเข้ม (Vermilion) เหมาะกับพื้นหลังปุ่ม/บับเบิล
   ที่มีตัวหนังสือขาวทับอยู่ แต่จุดนี้คือ "ตัวหนังสือ/แถบ" ลอยอยู่บนพื้นการ์ดสีเข้มเอง จึงต้องใช้สีทอง
   ที่มองเห็นชัดกว่าแทน ให้ความรู้สึก "ไฮไลต์สำคัญ" ตรงตามบทบาทสีทองในสเปกสี */
.csb-is-mine .csb-author-name {
	color: var(--csb-coral);
}
.csb-post.csb-is-mine,
.csb-comment.csb-is-mine {
	position: relative;
}
.csb-post.csb-is-mine::before,
.csb-comment.csb-is-mine::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -8px;
	width: 3px;
	border-radius: 3px;
	background: var(--csb-coral);
}

.csb-rank-badge {
	display: inline-block;
	padding: 1px 8px;
	font-size: 11px;
	line-height: 1.6;
	border-radius: 999px;
	background: var(--csb-coral);
	color: var(--csb-on-accent);
}

.csb-post-title {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
}

.csb-post-content {
	font-size: 13px;
	line-height: 1.5;
	white-space: pre-wrap;
	/* [ตามที่ขอ — ข้อ 5] เอฟเฟกต์ชั้นเลเยอร์ลอยขึ้นจากพื้น คล้ายเฟสบุ๊ค ไม่ต้องพึ่งพื้นหลังสีทึบ
	   ก็เห็นระดับความลึกได้ (เงาฟุ้งๆ บางๆ พอให้รู้สึกว่าลอย ไม่หนักจนดูเป็นกล่องแข็งๆ) */
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
.csb-comment-content {
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

/* [แก้ตามที่ขอรอบใหม่ — "อ่านต่อ" ต้องอยู่ *ภายใน* กล่องข้อความเสมอ แบบเฟสบุ๊ค/IG/ทวิตเตอร์
   ไม่ใช่ปุ่ม/ลิงก์ลอยแยกไว้ด้านล่างนอกกล่องเหมือนที่เคยทำ (เคสมีสื่อฝังในเนื้อหา) — ตอนนี้ทั้ง 2 เคส
   (ข้อความล้วน / มีสื่อฝัง) ใช้วิธี "ป้ายลอยมุมล่างขวา ซ้อนทับอยู่ในขอบเขตกล่องเดียวกัน" เหมือนกันหมด */
.csb-post-clipbox {
	position: relative;
}
.csb-post-content.csb-text-clamped {
	overflow: hidden;
	position: relative;
	padding-bottom: 22px; /* กันไม่ให้ป้าย "อ่านต่อ" ทับบรรทัดสุดท้ายจนอ่านไม่ออก */
}
/* เงาไล่สีจางๆ ก่อนถึงป้าย ให้ตัดคำดูนุ่มนวลขึ้น ไม่ใช่ถูกตัดห้วนๆ กลางบรรทัด */
.csb-post-content.csb-text-clamped::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 30px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.10));
	pointer-events: none;
	border-radius: 0 0 14px 14px;
}
.csb-post-readmore-inline,
.csb-post-readmore-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: rgba(0,0,0,0.72);
	padding: 3px 10px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.4;
	vertical-align: middle;
	margin-left: 4px;
}
/* เคสมีสื่อฝังในเนื้อหา (ตัดด้วย max-height แทนตัดตัวอักษร) — ป้ายลอยเป็น overlay
   มุมล่างขวา "ในกรอบกล่องข้อความเดียวกัน" ไม่ใช่บล็อกแยกด้านล่างนอกกล่องแบบเดิมอีกต่อไป */
.csb-post-readmore-badge.csb-post-readmore-overlay {
	position: absolute;
	right: 8px;
	bottom: 6px;
	margin-left: 0;
	z-index: 2;
}
/* [แก้ตามที่ขอรอบใหม่] แยกสเกลรูปภาพ 2 แบบชัดเจนตามบทบาท:
   - โพสต์หลัก/ต้นเรื่อง (รวมถึงโพสต์ที่เกิดจาก "ต่อกิ่งใหญ่" เพราะสถานะเป็นโพสต์ใหม่เหมือนกัน)
     → รูปใหญ่เต็มเด่นกลางจอ สัดส่วน 4:5 (ตั้งค่าเปลี่ยนเป็น 1:1/16:9/original ได้ที่ตั้งค่าเดิม)
   - คอมเมนต์/รายละเอียดที่แตกกิ่งออกมา (ตอบกลับ) → คงสัดส่วน 1:1 เดิม แต่ย่อขนาดลง ไม่เต็มความกว้าง
   วิดีโอ YouTube = การ์ดแยกต่างหากด้านล่างรูปเสมอ ไม่บังคับสัดส่วนวิดีโอ (จะบิดเบี้ยว/ครอปเนื้อหาวิดีโอ
   ถ้าฝืนสัดส่วน) แต่ใส่กรอบมุมโค้ง+เงาให้ดูเป็นการ์ดของตัวเองชัดเจน แยกจากรูปด้านบน */
.csb-media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 12px;
	max-width: 85%;
}
.csb-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.csb-media-video {
	margin-top: 8px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
/* โพสต์หลักในฟีด (ไม่ใช่คอมเมนต์) — รูปใหญ่ 4:5 อยู่กลางบับเบิลเสมอ ไม่ชิดซ้าย/ขวาตามฝั่งบับเบิลอีกต่อไป
   (ตัวข้อความ/ปุ่มยังคงสลับซ้าย-ขวาตามเดิม เปลี่ยนเฉพาะตำแหน่ง+สัดส่วนของ "รูป" เท่านั้น) */
.csb-post > .csb-post-clipbox > .csb-media {
	aspect-ratio: var( --csb-main-ratio, 4 / 5 );
	max-width: 94%;
	width: 94%;
	margin: 6px auto 0;
}
/* คอมเมนต์/ตอบกลับ (รายละเอียดที่แตกกิ่ง) — 1:1 เดิม แต่ย่อสัดส่วนลงชัดเจน ไม่เต็มความกว้างบับเบิล */
.csb-comment .csb-media {
	max-width: 55%;
	aspect-ratio: 1 / 1;
}
/* หน้าโพสต์เดี่ยว (ไม่ใช่ในฟีด) ไม่บังคับสัดส่วนใดๆ ให้เห็นรูปเต็มตามจริงเสมอ
   [ระวัง specificity] ต้องเขียนให้ specificity สูงกว่ากฎ "โพสต์หลักในฟีด" ด้านบน (.csb-post > .csb-post-clipbox > .csb-media)
   เพราะหน้าเดี่ยว postEl มีทั้งคลาส csb-post และ csb-post-single พร้อมกัน ถ้า specificity เท่ากันกฎฟีดจะชนะ
   เนื่องจากมาก่อนแค่ในไฟล์ ไม่ใช่เรื่องลำดับที่ตั้งใจ */
.csb-post.csb-post-single > .csb-post-clipbox > .csb-media { aspect-ratio: auto; max-width: 100%; width: auto; margin: 6px 0 0; }

/* แยกโพสต์ของแต่ละคนออกจากกันนิดหน่อยให้เห็นช่องว่าง ไม่ติดกันเป็นพืด */
.csb-post {
	margin-bottom: 4px;
}

.csb-post-actions,
.csb-comment-actions {
	display: flex;
	gap: 8px;
	font-size: 12px;
}

.csb-reply-btn {
	background: none;
	border: none;
	color: var(--csb-secondary);
	cursor: pointer;
	font-size: 13px;
	padding: 0;
	transition: color 0.2s;
}

.csb-reply-btn:hover {
	color: var(--csb-teal);
}

/* [ไอคอนกำหนดเอง] รูปแทนสัญลักษณ์ default (☰ / + / ⚙️) — ให้พอดีกับปุ่มเสมอไม่ว่าอัปโหลดรูปสัดส่วนไหนมา */
.csb-custom-icon {
	width: 60%;
	height: 60%;
	object-fit: contain;
	pointer-events: none;
}

/* [ระบบโหวตขึ้น-ลง] แทนไลค์หัวใจเดิม — วิดเจ็ตกะทัดรัด ▲ คะแนน ▼ อยู่ในบรรทัดเดียวกับปุ่มอื่น */
.csb-vote-widget {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.csb-vote-arrow {
	background: none;
	border: none;
	color: var(--csb-secondary);
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}
.csb-vote-arrow:hover {
	background: rgba(0,0,0,0.06);
}
.csb-vote-arrow.csb-vote-active-up {
	color: var(--csb-teal);
}
.csb-vote-arrow.csb-vote-active-down {
	color: var(--csb-coral, #D4AF37);
}
.csb-vote-score {
	font-size: 13px;
	font-weight: 600;
	color: var(--csb-secondary);
	min-width: 14px;
	text-align: center;
}

/* [แอดมิน] ตัวเลือกลบถาวรแยกจากปุ่มละลายหลัก กันกดพลาด */
.csb-hard-delete-label {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: #d63638;
}

/* [ก้อน 2] แถบปุ่ม 2 บรรทัด — กันล้นจอมือถือตอนปุ่มเยอะขึ้น (โหวต/คอมเมนต์/แตกกิ่ง/แก้ไข ฯลฯ) */
.csb-actions-2row {
	flex-direction: column;
	gap: 4px !important;
}
.csb-actions-row1,
.csb-actions-row2 {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	position: relative; /* ให้เมนูแชร์ยึดตำแหน่งตรงนี้ */
}
/* บับเบิลฝั่งขวา: ปุ่มชิดขวาให้สมมาตรกับทิศทางบับเบิล */
.csb-post.csb-right .csb-actions-row1,
.csb-post.csb-right .csb-actions-row2,
.csb-comment.csb-right .csb-actions-row1,
.csb-comment.csb-right .csb-actions-row2 {
	justify-content: flex-end;
}

/* [ปุ่มแชร์] เมนูแบบ dropdown ลอยขึ้นเหนือแถวปุ่ม */
.csb-share-menu {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 6px;
	background: var(--csb-card);
	border: 1px solid var(--csb-border);
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	padding: 6px;
	z-index: 100;
	display: flex;
	flex-direction: column;
	min-width: 190px;
}
.csb-post.csb-right .csb-share-menu { left: auto; right: 0; }
.csb-share-item {
	background: none;
	border: none;
	text-align: left;
	padding: 8px 10px;
	font-size: 13px;
	color: var(--csb-ink);
	cursor: pointer;
	border-radius: 6px;
	white-space: nowrap;
}
.csb-share-item:hover { background: var(--csb-panel); }
.csb-share-copy { border-top: 1px solid var(--csb-border); margin-top: 4px; padding-top: 8px; }

/* ป้าย "แตกกิ่งแล้ว" — ลิงก์ไปโพสต์ใหม่ที่แตกออกไป ไม่ใช่ปุ่มกดซ้ำ */
.csb-forked-badge {
	color: var(--csb-teal-dark, #6E0000) !important;
	font-weight: 600;
	text-decoration: none;
}

/* ========== COMMENTS (NESTED THREADS) ========== */
.csb-post-comments {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 0;
	border-top: 1px solid var(--csb-border);
	margin-top: 8px;
}

.csb-comment {
	display: flex;
	flex-direction: column;
	gap: 6px;
	animation: slideIn 0.2s ease-out;
}

/* Comment alternating sides */
.csb-comment.csb-right {
	align-items: flex-end;
}

.csb-comment.csb-right .csb-comment-header,
.csb-comment.csb-right .csb-comment-content,
.csb-comment.csb-right .csb-comment-actions {
	text-align: right;
	margin-left: auto;
	margin-right: 0;
	max-width: 90%;
}

.csb-comment.csb-right .csb-comment-header {
	flex-direction: row-reverse;
	gap: 6px;
}

.csb-comment.csb-right .csb-comment-content {
	background: var(--csb-teal);
	color: var(--csb-on-accent);
	padding: 8px 12px;
	border-radius: 12px 2px 12px 12px;
}

.csb-comment.csb-left {
	align-items: flex-start;
}

.csb-comment.csb-left .csb-comment-header,
.csb-comment.csb-left .csb-comment-content,
.csb-comment.csb-left .csb-comment-actions {
	text-align: left;
	margin-right: auto;
	margin-left: 0;
	max-width: 90%;
}

.csb-comment.csb-left .csb-comment-header {
	flex-direction: row;
	gap: 6px;
}

.csb-comment.csb-left .csb-comment-content {
	background: var(--csb-card);
	color: var(--csb-ink);
	border: 1px solid var(--csb-border);
	padding: 8px 12px;
	border-radius: 2px 12px 12px 12px;
}

.csb-comment-header {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
}

.csb-avatar.csb-sm {
	width: 28px;
	height: 28px;
}

.csb-comment-content {
	font-size: 12px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.csb-comment-replies {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}

/* [แทนที่กล่องตอบกลับเต็มจอ] กล่องเล็กขยายออกมาตรงจุดที่กด — ไม่บังเนื้อหาที่กำลังอ่านอยู่ */
.csb-inline-reply {
	background: var(--csb-panel);
	border-radius: 10px;
	padding: 8px;
	margin: 6px 0;
	animation: csbPop 0.15s ease-out;
}
.csb-inline-reply-input {
	width: 100%;
	border: 1px solid var(--csb-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	resize: none;
	min-height: 36px;
	max-height: 200px;
	box-sizing: border-box;
	background: var(--csb-card);
	color: var(--csb-ink);
}
.csb-inline-reply-input:focus { outline: 2px solid var(--csb-teal); outline-offset: -1px; }
.csb-inline-reply-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 6px;
}
.csb-inline-reply-cancel,
.csb-inline-reply-send {
	border: none;
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.csb-inline-reply-cancel { background: none; color: var(--csb-secondary); }
.csb-inline-reply-send { background: var(--csb-teal); color: var(--csb-on-accent); }
.csb-inline-reply-send:disabled { opacity: 0.6; cursor: default; }

/* 🆕 [v28] แนบรูป/GIF/YouTube ในกล่องตอบกลับเล็ก — ใช้ระบบลิงก์ล้วน ไม่มีการอัปโหลดไฟล์จริง */
.csb-inline-media-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.csb-inline-media-btn {
	border: 1px solid var(--csb-border); background: none; color: var(--csb-secondary);
	border-radius: 20px; padding: 4px 10px; font-size: 11px; cursor: pointer;
}
.csb-inline-media-btn:hover { border-color: var(--csb-teal); color: var(--csb-teal); }
.csb-inline-media-gif-slot:empty { display: none; }
.csb-inline-media-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.csb-inline-media-chip {
	display: inline-flex; align-items: center; gap: 6px; background: var(--csb-card-bg, rgba(0,0,0,.06));
	border: 1px solid var(--csb-border); border-radius: 20px; padding: 3px 6px 3px 10px; font-size: 11px; color: var(--csb-secondary);
}
.csb-inline-media-clear { border: none; background: none; color: inherit; cursor: pointer; font-size: 12px; line-height: 1; padding: 2px; }
.csb-inline-media-clear:hover { color: var(--csb-teal); }

/* ========== REPLY FORM ========== */
.csb-reply-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0;
	padding: 8px;
	background: var(--csb-panel);
	border-radius: 8px;
}

.csb-reply-form textarea {
	padding: 8px 10px;
	border: 1px solid var(--csb-border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 12px;
	resize: none;
	height: 60px;
}

.csb-reply-form .csb-form-actions {
	gap: 6px;
}

.csb-reply-form .csb-btn {
	padding: 6px 12px;
	font-size: 12px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 700px) {
	#csb-feed-container {
		padding: 8px 0;
	}

	/* คอมโพสเซอร์เต็มจอบนมือถือ: กินพื้นที่ 100% ทั้งกว้างและสูง (dvh รองรับแป้นพิมพ์เปิด) */
	.csb-modal {
		align-items: stretch;
		padding: 0;
		box-sizing: border-box;
	}

	.csb-modal-content {
		width: 100%;
		max-height: 100vh;
		max-height: 100dvh;
	}

	.csb-post.csb-right .csb-post-title,
	.csb-post.csb-right .csb-post-content,
	.csb-post.csb-left .csb-post-title,
	.csb-post.csb-left .csb-post-content {
		max-width: 100%;
	}

	.csb-comment.csb-right .csb-comment-content,
	.csb-comment.csb-left .csb-comment-content {
		max-width: 100%;
	}

	.csb-avatar {
		width: 32px;
		height: 32px;
	}

	.csb-avatar.csb-sm {
		width: 24px;
		height: 24px;
	}

	.csb-post-title {
		font-size: 13px;
	}

	.csb-post-content {
		font-size: 12px;
	}

	.csb-comment-content {
		font-size: 11px;
	}
}

/* ========== UTILITIES ========== */
.csb-hidden {
	display: none !important;
}

/* Animation for new items */
@keyframes fadeInScale {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ========== CATEGORY TABS ========== */
.csb-category-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 12px 12px;
	-webkit-overflow-scrolling: touch;
}
.csb-category-tabs:empty { padding: 0; } /* [เอาแท็บออกแล้ว] เหลือไว้แค่จุดอ้างอิงตำแหน่งให้แถบสลับฟีด ไม่กินพื้นที่ */
.csb-category-tabs::-webkit-scrollbar { display: none; }

/* [ฟีดสำหรับคุณ] แถบบางๆ ปัด/แตะสลับ "ทั้งหมด / สำหรับคุณ" — สูงพอสมควรให้ปัดง่าย
   แต่ไม่กินพื้นที่จอเยอะ (ตามที่ตกลง 40-50px) โซนปัดจำกัดแค่แถบนี้ ไม่ชนกับการเลื่อนอ่านฟีด */
.csb-feedview-strip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px 10px;
	touch-action: pan-y; /* อนุญาตเลื่อนแนวตั้งผ่านได้ แต่ปัดแนวนอนจะถูกจับโดย JS */
}
.csb-feedview-track {
	position: relative;
	display: flex;
	flex: 1;
	background: var(--csb-panel);
	border-radius: 10px; /* [ข้อ 2] เหลี่ยมมากขึ้น แทนแคปซูลกลม 999px เดิม */
	padding: 3px;
	height: 44px; /* อยู่ในช่วง 40-50px ที่ตกลงกันไว้ */
}
.csb-feedview-btn {
	flex: 1;
	border: none;
	background: transparent;
	border-radius: 7px; /* [ข้อ 2] เหลี่ยมตามแทร็กด้านนอก */
	font-size: 13px;
	font-weight: 700;
	color: var(--csb-secondary);
	cursor: pointer;
	position: relative;
	z-index: 1;
	transition: color 0.2s ease;
}
.csb-feedview-btn.csb-feedview-active {
	color: var(--csb-on-accent);
}
.csb-feedview-track::before {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: calc(50% - 3px);
	height: calc(100% - 6px);
	background: var(--csb-teal, #8B0000);
	border-radius: 7px; /* [ข้อ 2] เหลี่ยมตามแทร็ก */
	transition: transform 0.25s ease;
	z-index: 0;
}
.csb-feedview-strip.csb-feedview-on-foryou .csb-feedview-track::before {
	transform: translateX(100%);
}
.csb-feedview-settings {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--csb-border);
	background: var(--csb-panel);
	font-size: 16px;
	cursor: pointer;
}

/* [สลับธีมหน้าบ้าน] ปุ่ม 🌙/☀️ — วางข้างปุ่ม ⚙️ เดิม หน้าตาเดียวกันให้ดูเป็นกลุ่มเดียวกัน */
.csb-theme-toggle-btn {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--csb-border);
	background: var(--csb-panel);
	font-size: 16px;
	cursor: pointer;
	margin-left: 6px;
}
.csb-theme-toggle-btn:hover { border-color: var(--csb-coral); }

/* [ปักหมุด — ข้อ 1] แถบสลับหมุน */
.csb-pinned-banner {
	margin: 8px 12px;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(135deg, color-mix(in srgb, var(--csb-teal) 12%, transparent), color-mix(in srgb, var(--csb-teal) 4%, transparent));
	border: 1px solid color-mix(in srgb, var(--csb-teal) 25%, transparent);
	position: relative;
}
.csb-pinned-track {
	display: flex;
	transition: transform 0.4s ease;
}
.csb-pinned-slide {
	flex: 0 0 100%;
	width: 100%;
	padding: 12px 14px;
	text-decoration: none;
	color: inherit;
	display: block;
	box-sizing: border-box;
}
.csb-pinned-slide-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	color: var(--csb-pin);
	margin-bottom: 4px;
}
.csb-pinned-slide-title {
	font-weight: 700;
	font-size: 13px;
	color: var(--csb-ink);
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.csb-pinned-slide-excerpt {
	font-size: 11px;
	color: var(--csb-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.csb-pinned-dots {
	display: flex;
	justify-content: center;
	gap: 4px;
	padding-bottom: 8px;
}
.csb-pinned-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--csb-teal) 30%, transparent);
}
.csb-pinned-dot-active { background: var(--csb-pin); }

/* [ฟีดสำหรับคุณ] กล่องเลือกความสนใจ — ใช้โครง modal เดียวกับกล่องดูกิ่ง/แผนผัง */
.csb-interest-hint { font-size: 12px; color: var(--csb-secondary); margin: 0 0 12px; }
.csb-interest-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.csb-interest-chip {
	border: 1.5px solid var(--csb-cat-color, var(--csb-secondary));
	background: var(--csb-card);
	color: var(--csb-cat-color, var(--csb-secondary));
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.csb-interest-chip-active {
	background: var(--csb-cat-color, var(--csb-secondary));
	color: var(--csb-on-accent);
}
.csb-interest-save {
	width: 100%;
	background: var(--csb-teal, #8B0000);
	color: var(--csb-on-accent);
	border: none;
	border-radius: 10px;
	padding: 12px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.csb-foryou-empty { text-align: center; padding: 40px 20px; }

.csb-tab {
	flex-shrink: 0;
	padding: 6px 16px;
	border: 1.5px solid var(--csb-border);
	border-radius: 999px;
	background: var(--csb-card);
	color: var(--csb-ink);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.15s;
}
.csb-tab:hover { border-color: var(--csb-teal); }
.csb-tab-active {
	background: var(--csb-teal);
	border-color: var(--csb-teal) !important;
	color: var(--csb-on-accent);
	font-weight: 600;
}

/* ==========================================================
   v3.1 — Topbar, เมนูลิ้นชัก, สื่อ, หน้าโพสต์/กิ่ง
   ========================================================== */

.csb-topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	position: relative;
}
.csb-topbar-title { font-weight: 700; font-size: 16px; flex: 1; }

/* [ระบบค้นหา — เพิ่ม CSS ที่ขาดหายไปทั้งหมด] */
.csb-search-btn {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}
.csb-search-panel {
	position: absolute;
	top: 100%;
	left: 12px;
	right: 12px;
	max-width: 420px;
	background: var(--csb-card);
	border: 1px solid var(--csb-border);
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0,0,0,0.18);
	z-index: 600;
	overflow: hidden;
}
.csb-search-input-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--csb-border);
}
.csb-search-input-row input {
	flex: 1;
	border: none;
	padding: 12px;
	font-size: 13px;
	outline: none;
}
.csb-search-input-row button {
	background: none;
	border: none;
	font-size: 14px;
	color: var(--csb-secondary);
	cursor: pointer;
	padding: 0 12px;
}
.csb-search-results {
	max-height: 60vh;
	overflow-y: auto;
}
.csb-search-hint {
	padding: 16px;
	text-align: center;
	color: var(--csb-secondary);
	font-size: 12px;
}
.csb-search-result-item {
	display: block;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--csb-ink);
	border-bottom: 1px solid var(--csb-panel);
}
.csb-search-result-item:hover { background: var(--csb-panel); }
.csb-search-result-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.csb-search-result-excerpt { font-size: 11px; color: var(--csb-secondary); line-height: 1.4; }

/* [ระบบแจ้งเตือน — ระดับ 1] กระดิ่ง + ตัวเลข + แผงรายการแบบ dropdown */
.csb-notif-bell-btn {
	position: relative;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}
.csb-notif-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--csb-coral, #D4AF37);
	color: var(--csb-on-accent);
	font-size: 10px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* [ตามที่ขอ — ข้อ 1,2] รูปโปรไฟล์อยู่ในแถบหัวข้อเลย นิ่งแน่นอน ไม่ลอยอีกต่อไป */
.csb-topbar-avatar {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	border: 1.5px solid var(--csb-border);
	flex-shrink: 0;
}
.csb-topbar-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.csb-notif-panel {
	position: absolute;
	top: 100%;
	right: 12px;
	width: 320px;
	max-width: calc(100vw - 24px);
	max-height: 70vh;
	overflow-y: auto;
	background: var(--csb-card);
	border: 1px solid var(--csb-border);
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0,0,0,0.18);
	z-index: 600;
}
.csb-notif-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	font-weight: 700;
	font-size: 13px;
	border-bottom: 1px solid var(--csb-border);
}
.csb-notif-panel-head button {
	background: none;
	border: none;
	color: var(--csb-teal);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}

/* [ระบบแจ้งเตือน — ระดับ 2] แถบขอสิทธิ์เปิด Push Notification */
.csb-push-enable-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: color-mix(in srgb, var(--csb-teal) 8%, transparent);
	border-bottom: 1px solid var(--csb-border);
	font-size: 12px;
}
.csb-push-enable-row button {
	margin-left: auto;
	background: var(--csb-teal);
	color: var(--csb-on-accent);
	border: none;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}

/* [ตามที่ขอ — เด้งถามอัตโนมัติเอง] กล่องถามความยินยอมของเราเอง ก่อนเด้งกล่องขออนุญาตจริงของเบราว์เซอร์ */
.csb-push-auto-prompt {
	position: fixed;
	inset: 0;
	z-index: 10001;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.55);
	animation: csbFadeIn 0.2s ease-out;
}
@keyframes csbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.csb-push-auto-prompt-inner {
	max-width: 420px;
	margin: 0 auto;
	background: #1c1c1e;
	color: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 8px 28px rgba(0,0,0,0.4);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}
.csb-push-auto-prompt-icon { font-size: 28px; }
.csb-push-auto-prompt-text { font-size: 14px; font-weight: 600; }
.csb-push-auto-prompt-btns { display: flex; gap: 8px; width: 100%; }
.csb-push-auto-prompt-btns button {
	flex: 1;
	border: none;
	border-radius: 999px;
	padding: 10px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.csb-push-auto-yes { background: var(--csb-teal); color: var(--csb-on-accent); }
.csb-push-auto-no { background: rgba(255,255,255,0.12); color: #ccc; }
.csb-notif-list { padding: 4px; }
.csb-notif-item {
	display: block;
	padding: 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--csb-ink);
	font-size: 12px;
	line-height: 1.5;
}
.csb-notif-item:hover { background: var(--csb-panel); }
.csb-notif-item.csb-notif-unread {
	background: color-mix(in srgb, var(--csb-teal) 8%, transparent);
	font-weight: 600;
}
.csb-notif-item-time { display: block; font-size: 10px; color: var(--csb-secondary); margin-top: 2px; font-weight: 400; }
.csb-notif-empty { padding: 24px 12px; text-align: center; color: var(--csb-secondary); font-size: 12px; }
.csb-menu-btn {
	background: none;
	border: 1.5px solid var(--csb-border);
	border-radius: 8px;
	font-size: 18px;
	padding: 4px 12px;
	cursor: pointer;
	color: var(--csb-ink);
}
.csb-menu-btn:hover { border-color: var(--csb-teal); }

.csb-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9998;
}
.csb-menu-overlay.csb-open { display: block; }
.csb-menu-drawer {
	position: fixed;
	top: 0; left: -290px;
	width: 280px; height: 100vh;
	background: var(--csb-panel);
	box-shadow: 2px 0 16px rgba(0,0,0,0.15);
	z-index: 9999;
	transition: left 0.25s ease;
	overflow-y: auto;
}
.csb-menu-drawer.csb-open { left: 0; }
.csb-menu-head {
	padding: 16px;
	font-weight: 700;
	border-bottom: 1px solid var(--csb-border);
	color: var(--csb-ink);
}
.csb-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	color: var(--csb-ink);
	text-decoration: none;
	border-bottom: 1px solid #f0f4f3;
	font-size: 14px;
}
.csb-menu-item:hover { background: var(--csb-panel); }
/* [☰ เมนูกำหนดเอง] ปุ่มรูปภาพ — จำกัดความสูงไม่ให้ล้นลิ้นชักถ้าแอดมินไม่ได้ตั้งขนาดไว้ */
.csb-menu-custom-item img { max-height: 60px; width: auto; display: block; }
.csb-menu-dot {
	width: 12px; height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* สื่อในโพสต์ — [แก้บั๊กจริง] เดิมมีกฎซ้อนอยู่ตรงนี้ (max-width 85% + img ไม่มี object-fit) ที่มาทีหลัง
   ในไฟล์ ชนะกฎ 1:1 ที่ตั้งไว้ด้านบนโดยไม่รู้ตัว (specificity เท่ากัน กฎหลังชนะ) ทำให้ดูเหมือนไม่ได้แก้
   อะไรเลยทั้งที่แก้ไปแล้วจริง — เอาส่วนที่ชนกันออก เหลือแค่ margin-left (จัดชิดขวา) ที่ไม่ชนกัน */
.csb-post.csb-right .csb-media { margin-left: auto; }

/* [8 ฟิลเตอร์พื้นฐาน — ตามที่ปรึกษากัน] ใช้ CSS filter ล้วนๆ ไม่แตะรูปต้นฉบับเลยแม้แต่พิกเซลเดียว
   ไม่กินพื้นที่เก็บข้อมูลเพิ่ม เบราว์เซอร์แสดงผลต่างไปเฉยๆ — เข้ากับธีมเว็บแนวลี้ลับ/ประวัติศาสตร์ */
.csb-media img.csb-filter-vintage  { filter: sepia(0.5) contrast(0.92) brightness(1.05); }
.csb-media img.csb-filter-bw       { filter: grayscale(1); }
.csb-media img.csb-filter-noir     { filter: grayscale(1) contrast(1.4) brightness(0.9); }
.csb-media img.csb-filter-gold     { filter: sepia(0.35) saturate(1.4) hue-rotate(-8deg) brightness(1.02); }
.csb-media img.csb-filter-drama    { filter: contrast(1.3) saturate(1.5); }
.csb-media img.csb-filter-mist     { filter: saturate(0.55) brightness(1.15) contrast(0.85); }
.csb-media img.csb-filter-cold     { filter: grayscale(0.25) contrast(1.15) brightness(0.95) hue-rotate(175deg) saturate(0.85); }

/* [แก้บั๊ก — ฟิลเตอร์ไม่ติดรูปจากลิงก์] เวอร์ชันคลุมทั้งกล่องเนื้อหา สำหรับรูปที่แปลงมาจากลิงก์
   อัลบัมออนไลน์ (ฝังใน .csb-post-content ไม่ใช่ช่องรูปแนบ) — สูตรเดียวกับด้านบนเป๊ะ */
.csb-content-filter-vintage img { filter: sepia(0.5) contrast(0.92) brightness(1.05); }
.csb-content-filter-bw img      { filter: grayscale(1); }
.csb-content-filter-noir img    { filter: grayscale(1) contrast(1.4) brightness(0.9); }
.csb-content-filter-gold img    { filter: sepia(0.35) saturate(1.4) hue-rotate(-8deg) brightness(1.02); }
.csb-content-filter-drama img   { filter: contrast(1.3) saturate(1.5); }
.csb-content-filter-mist img    { filter: saturate(0.55) brightness(1.15) contrast(0.85); }
.csb-content-filter-cold img    { filter: grayscale(0.25) contrast(1.15) brightness(0.95) hue-rotate(175deg) saturate(0.85); }

/* [8 ฟิลเตอร์พื้นฐาน — ตัวเลือกในกล่องสร้างโพสต์] */
.csb-filter-picker {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.csb-filter-picker-label {
	font-size: 12px;
	color: #ccc;
}
.csb-filter-swatches {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}
.csb-filter-swatch {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 26px;
	color: var(--csb-secondary);
	opacity: 0.6;
}
.csb-filter-swatch span {
	font-size: 10px;
	color: var(--csb-secondary);
	white-space: nowrap;
}
.csb-filter-swatch-active {
	opacity: 1;
}
.csb-filter-swatch-active span {
	color: var(--csb-teal);
	font-weight: 700;
}
/* พรีวิวคร่าวๆ บนวงกลมตัวเลือกเอง ให้พอเห็นโทนก่อนเลือกจริง */
.csb-filter-swatch.csb-filter-vintage { filter: sepia(0.5) contrast(0.92) brightness(1.05); }
.csb-filter-swatch.csb-filter-bw      { filter: grayscale(1); }
.csb-filter-swatch.csb-filter-noir    { filter: grayscale(1) contrast(1.4) brightness(0.9); }
.csb-filter-swatch.csb-filter-gold    { filter: sepia(0.35) saturate(1.4) hue-rotate(-8deg); }
.csb-filter-swatch.csb-filter-drama   { filter: contrast(1.3) saturate(1.5); }
.csb-filter-swatch.csb-filter-mist    { filter: saturate(0.55) brightness(1.15) contrast(0.85); }
.csb-filter-swatch.csb-filter-cold    { filter: grayscale(0.25) contrast(1.15) brightness(0.95) hue-rotate(175deg) saturate(0.85); }
.csb-media-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.csb-media-video iframe {
	width: 100%;
	height: 100%;
	border-radius: 12px;
}
/* [แก้ขนาด] วิดีโอ YouTube ที่ฝังจากลิงก์ในช่องพิมพ์ปกติ (class-csb-link-parser.php::render_youtube)
   เดิมไม่มี CSS คุมเลย ทำให้ iframe ใช้ความกว้าง/สูงที่ YouTube oEmbed ส่งมาตรงๆ (640x360)
   ดูใหญ่เกะกะไม่สมส่วนกับบับเบิลแชท ตอนนี้ล็อกสัดส่วน 16:9 เท่ากับช่องแนบสื่อเดิมแล้ว */
.csb-yt-embed {
	aspect-ratio: 16 / 9 !important;
	overflow: hidden;
	border-radius: 12px;
}
.csb-yt-embed iframe {
	width: 100% !important;
	height: 100% !important;
	border-radius: 12px;
}
.csb-media-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var(--csb-ink);
}
.csb-modal-content .csb-media-label,
.csb-modal-content .csb-media-hint {
	color: #ccc;
}
.csb-modal-content .csb-branch-title,
.csb-modal-content label {
	color: #ccc;
}
/* [คำใบ้แทนช่องกรอกที่ตัดออก] ตัวเล็กจางๆ ไม่ใช่ช่องกรอก ไม่แย่งเวลาพิมพ์ */
.csb-media-hint {
	font-size: 11px;
	color: var(--csb-secondary);
	margin: 4px 0 0;
}

/* [ปุ่มลัดอัลบัมออนไลน์ — แผงในกล่องสร้างโพสต์] */
.csb-cloud-album-panel {
	background: #151518;
	border: 1px solid #2d2d35;
	border-radius: 8px;
	padding: 12px;
	margin: 4px 0;
}
.csb-cloud-album-buttons {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}
.csb-cloud-btn {
	flex: 1;
	padding: 8px;
	text-align: center;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
}
.csb-cloud-btn-photos { background: #4285F4; }
.csb-cloud-btn-drive { background: #34A853; }
.csb-cloud-btn-flickr { background: #ff0084; }
.csb-cloud-album-input-row {
	display: flex;
	gap: 6px;
}
.csb-cloud-album-input-row input {
	flex: 1;
	padding: 8px 12px;
	background: #0b0b0d;
	border: 1px solid #3d3d45;
	color: #fff;
	font-size: 12px;
	border-radius: 4px;
}
.csb-cloud-album-input-row button {
	background: #8B5CF6;
	color: #fff;
	border: none;
	padding: 0 14px;
	font-weight: 700;
	font-size: 12px;
	border-radius: 4px;
	cursor: pointer;
}
.csb-cloud-album-panel .csb-media-hint {
	color: var(--csb-secondary);
	margin-top: 8px;
}

/* ค้นหา GIF (Tenor) */
.csb-gif-field { display: flex; flex-direction: column; gap: 4px; }
.csb-gif-toggle {
	align-self: flex-start;
	background: var(--csb-panel);
	color: var(--csb-ink);
	border: 1.5px solid var(--csb-border);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
}
.csb-gif-toggle:hover { background: var(--csb-border); }
.csb-gif-search-box {
	border: 1.5px solid var(--csb-border);
	border-radius: 10px;
	padding: 8px;
	background: var(--csb-panel);
}
.csb-gif-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid var(--csb-border);
	font-size: 13px;
	margin-bottom: 6px;
}
.csb-gif-results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	max-height: 240px;
	overflow-y: auto;
}
.csb-gif-thumb {
	width: 100%;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	border: 1.5px solid transparent;
}
.csb-gif-thumb:hover { border-color: var(--csb-teal); }
.csb-gif-empty { grid-column: 1 / -1; font-size: 12px; color: var(--csb-muted, #888); padding: 6px 0; }

/* ปุ่มลบโพสต์ (เฉพาะแอดมิน) */
.csb-delete-btn { border: 1.5px solid #d63638 !important; color: #d63638 !important; }
.csb-delete-btn:hover { background: color-mix(in srgb, var(--csb-teal) 18%, transparent) !important; }

/* แถบย้อนกลับ + breadcrumb */
.csb-back-bar { padding: 8px 12px; }
.csb-back-bar a {
	color: var(--csb-teal-dark);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.csb-back-bar a:hover { text-decoration: underline; }
.csb-crumb {
	padding: 4px 12px 10px;
	font-size: 12px;
	color: var(--csb-secondary);
}
.csb-crumb a { color: var(--csb-teal-dark); text-decoration: none; }
.csb-crumb a:hover { text-decoration: underline; }

/* ลิงก์เปิดกิ่ง + ดูการสนทนาต่อ */
.csb-branch-link {
	font-size: 11px;
	text-decoration: none;
	color: var(--csb-branch);
	opacity: 0.55;
	margin-left: 4px;
}
.csb-branch-link:hover { opacity: 1; }
.csb-continue-link {
	display: inline-block;
	margin: 4px 0 4px 8px;
	font-size: 12px;
	color: var(--csb-coral);
	text-decoration: none;
	font-weight: 600;
}
.csb-continue-link:hover { text-decoration: underline; }

/* กิ่งซ้อน: เส้นนำสายตา */
.csb-comment-nested {
	margin-left: 16px;
	padding-left: 10px;
	border-left: 2px solid color-mix(in srgb, var(--csb-teal) 22%, transparent);
}
.csb-branch-view { border-top: none; padding: 0 12px; }

.csb-post-title a { color: inherit; text-decoration: none; }
.csb-post-title a:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.csb-menu-drawer { width: 240px; }
	.csb-media { max-width: 100%; }
}

/* ==========================================================
   v3.2 — เต็มจอมือถือ, แบนเนอร์โพสต์ใหม่, การ์ดแทรก
   ========================================================== */

/* กระดานอยู่กึ่งกลางเสมอ กว้างตามค่าหลังบ้าน เหลือขอบข้างละ 10px */
#csb-feed-container {
	width: 100%;
	max-width: var(--csb-board-w, 640px);
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
	overflow-x: hidden;
}
.csb-feed { padding-left: 0; padding-right: 0; }

/* ความสูงขั้นต่ำของโพสต์ (0 = อัตโนมัติ) ปรับจากหลังบ้าน */
.csb-post { min-height: var(--csb-post-minh, auto); }

/* แบนเนอร์โพสต์ใหม่ (จาก 3.0.4) */
.csb-new-posts-banner {
	display: none;
	position: sticky;
	top: 8px;
	z-index: 50;
	margin: 0 auto 10px;
	padding: 9px 22px;
	width: fit-content;
	border: none;
	border-radius: 999px;
	background: var(--csb-coral);
	color: var(--csb-on-accent);
	font-weight: 700;
	font-size: 13px;
	box-shadow: 0 4px 14px rgba(255,122,89,0.45);
	animation: csbPop 0.25s ease-out;
	transition: opacity 0.3s ease;
}
@keyframes csbPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* การ์ดแทรกเนื้อหา (บทความ / โซเชียล / คอมเมนต์เดือด) */
.csb-inject-card {
	display: block;
	margin: 4px 0;
	padding: 14px;
	border-radius: 14px;
	text-decoration: none;
	color: var(--csb-ink);
	background: var(--csb-card);
	border: 1.5px solid var(--csb-border);
	transition: transform 0.15s, box-shadow 0.15s;
}
.csb-inject-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.csb-inject-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.csb-inject-actions {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--csb-border);
}
.csb-inject-actions .csb-continue-branch-btn {
	margin: 0;
}
.csb-inject-tag {
	font-size: 11px;
	font-weight: 700;
	color: var(--csb-teal-dark);
	margin-bottom: 6px;
	letter-spacing: 0.3px;
}
.csb-hot-card .csb-inject-tag { color: var(--csb-coral); }
.csb-inject-thumb {
	width: 100%;
	aspect-ratio: 4 / 5; /* ค่าเริ่มต้น: 4:5 (แนวตั้ง) — เปลี่ยนได้จากเมนู "ตั้งค่า" → "ขนาดสัดส่วนภาพปกที่ดึงมา" โดยไม่ต้องแก้โค้ด */
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 8px;
	display: block;
}
/* คลาสเหล่านี้ถูกเติมโดย JS ตามค่าที่เลือกไว้ในเมนู "ตั้งค่า" (ดู renderArticleCard ใน frontend.js) */
.csb-inject-thumb.csb-ratio-1-1  { aspect-ratio: 1 / 1; }
.csb-inject-thumb.csb-ratio-16-9 { aspect-ratio: 16 / 9; }
/* โหมด "ขนาดใกล้เคียงเดิม" (original) — ปล่อยตามสัดส่วนจริงของภาพ ไม่บังคับตัด
   ของเดิมมี max-height: 180px ตายตัว ทำให้ภาพถูกบีบแบนบนการ์ดกว้าง ตอนนี้ตัดออกแล้ว */
.csb-inject-thumb.csb-ratio-original {
	aspect-ratio: auto;
	height: auto;
}
.csb-inject-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.csb-inject-excerpt { font-size: 13px; color: var(--csb-secondary); line-height: 1.5; }
.csb-inject-author {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
}
.csb-hot-votes { color: var(--csb-coral); font-weight: 700; font-size: 12px; }
.csb-inject-more {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--csb-coral);
}
.csb-article-card { border-left: 4px solid var(--csb-teal); }
.csb-activity-card { border-left: 4px solid #5B8DEF; }
.csb-hot-card { border-left: 4px solid var(--csb-coral); background: color-mix(in srgb, var(--csb-coral) 8%, transparent); }

/* เมนูลูกในลิ้นชัก */
.csb-menu-child { padding-left: 34px; font-size: 13px; background: var(--csb-panel); }

/* ฟอร์มแก้ไขโพสต์ */
.csb-edit-form input[type=text],
.csb-edit-form select {
	padding: 8px 10px;
	border: 1px solid var(--csb-border);
	border-radius: 6px;
	font: inherit;
}
.csb-edit-form textarea { height: 110px; }

@media (max-width: 700px) {
	.csb-feed { padding-left: 4px; padding-right: 4px; }
	.csb-topbar { padding: 8px 6px; }
	.csb-category-tabs { padding-left: 6px; padding-right: 6px; }
}


/* สื่อในคอมเมนต์ — [แก้ตามที่ขอรอบใหม่] ย้ายกฎขนาดหลักไปกำหนดที่จุดเดียวด้านบนแล้ว (55%, 1:1)
   เหลือไว้แค่กฎจัดตำแหน่งฝั่งขวา กันไม่ให้ค่า max-width ตรงนี้มาชนแล้วชนะกฎด้านบนโดยไม่ตั้งใจ
   (ลำดับ CSS เดิมมาทีหลัง specificity เท่ากัน จะเป็นตัวชนะ ถ้าทิ้งค่า 90% ไว้ตรงนี้จะกลับไปใหญ่เหมือนเดิม) */
.csb-comment.csb-right .csb-media { margin-left: auto; }
.csb-reply-form .csb-media-label { font-size: 12px; }
.csb-reply-form input[type=url],
.csb-reply-form input[type=file] {
	padding: 6px 8px;
	border: 1px solid var(--csb-border);
	border-radius: 6px;
	font-size: 12px;
	background: var(--csb-card);
	color: var(--csb-ink);
}

/* ==========================================================
   v3.6.1 — เพิ่มมิติ เงา และลูกเล่นการเคลื่อนไหว ให้กระดานดูมีวอลลุ่มขึ้น
   ========================================================== */

/* ฟองข้อความ: ใส่เงาให้ดูลอยเหนือพื้น แทนที่จะแบนราบ */
.csb-post.csb-right .csb-post-title,
.csb-post.csb-right .csb-post-content {
	box-shadow: 0 6px 16px color-mix(in srgb, var(--csb-teal) 28%, transparent), 0 1px 3px rgba(0,0,0,0.08);
}
.csb-post.csb-left .csb-post-title,
.csb-post.csb-left .csb-post-content {
	box-shadow: 0 5px 14px rgba(22,33,31,0.08), 0 1px 3px rgba(0,0,0,0.05);
}
.csb-comment.csb-right .csb-comment-content {
	box-shadow: 0 4px 10px color-mix(in srgb, var(--csb-teal) 22%, transparent);
}
.csb-comment.csb-left .csb-comment-content {
	box-shadow: 0 3px 8px rgba(22,33,31,0.06);
}
.csb-avatar,
.csb-avatar.csb-sm {
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ปุ่มหลัก: เพิ่มผิวมันวาวบางๆ + เงาสี + เอฟเฟคกดจม */
.csb-new-post-btn,
.csb-btn-primary {
	box-shadow: 0 4px 14px color-mix(in srgb, var(--csb-teal) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.3);
	background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
	transition: all 0.15s ease;
}
.csb-new-post-btn:active,
.csb-btn-primary:active {
	transform: translateY(1px);
	box-shadow: 0 2px 6px color-mix(in srgb, var(--csb-teal) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.2);
}
.csb-btn-secondary {
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	transition: all 0.15s ease;
}
.csb-btn-secondary:active { transform: translateY(1px); }

/* แท็บหมวดหมู่และปุ่มเมนู: เงาบางๆ ให้ลอยจากพื้นหลัง */
.csb-tab { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.csb-tab-active { box-shadow: 0 5px 14px color-mix(in srgb, var(--csb-teal) 40%, transparent); }
.csb-menu-btn { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.csb-topbar {
	box-shadow: 0 2px 10px rgba(0,0,0,0.07);
	background-color: inherit;
}

/* ปุ่มโหวต/ตอบกลับ: ทำเป็นพิลล์นูนเล็กน้อยแทนตัวหนังสือลอยเฉยๆ */
.csb-vote-widget,
.csb-reply-btn {
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(0,0,0,0.035);
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.csb-vote-widget:hover,
.csb-reply-btn:hover {
	background: rgba(0,0,0,0.07);
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* กล่องฟอร์ม (ตอบกลับ/แก้ไข/ค้นหา GIF): ให้เด้งลอยขึ้นมาแบบมีมิติ ไม่ใช่โผล่มาเฉยๆ */
.csb-reply-form,
.csb-gif-search-box {
	box-shadow: 0 14px 34px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.08);
	transform-origin: top center;
	animation: csbFormPop 0.3s cubic-bezier(.34, 1.56, .64, 1) both;
	width: 100%;
	box-sizing: border-box;
	/* กันไม่ให้แถบหัวข้อลอย (sticky topbar) บังตอนเลื่อนจอเข้าหาฟอร์ม */
	scroll-margin-top: 68px;
	scroll-margin-bottom: 16px;
}
@keyframes csbFormPop {
	0%   { opacity: 0; transform: translateY(18px) scale(0.94); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* หน้าต่างโพสต์ใหม่ (Modal): เด้งเข้าแบบมีน้ำหนัก + เงาลึกขึ้น */
.csb-modal-content {
	box-shadow: 0 24px 60px rgba(0,0,0,0.4);
	animation: csbModalPop 0.32s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes csbModalPop {
	0%   { opacity: 0; transform: translateY(26px) scale(0.95); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* แบนเนอร์ "มีโพสต์ใหม่": เด้งเข้าแบบมีสปริงมากขึ้น */
@keyframes csbPop {
	0%   { transform: scale(0.7) translateY(-12px); opacity: 0; }
	60%  { transform: scale(1.06) translateY(2px); opacity: 1; }
	100% { transform: scale(1) translateY(0); }
}

/* โพสต์ใหม่ที่เพิ่งถูกดึงขึ้นมาแสดง: ลอยขึ้นมาก่อนแล้วค่อยเด้งลงมาประกบกับกระดาน
   ใส่ class นี้จาก JS ตอน prepend โพสต์ใหม่เข้าฟีด แล้วลบทิ้งหลังเล่นจบ */
.csb-drop-in {
	animation: csbDropIn 0.6s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes csbDropIn {
	0%   { opacity: 0; transform: translateY(-30px) scale(0.95); filter: drop-shadow(0 24px 28px rgba(0,0,0,0.3)); }
	55%  { opacity: 1; transform: translateY(5px) scale(1.015); filter: drop-shadow(0 12px 16px rgba(0,0,0,0.16)); }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

/* ==========================================================
   v3.6 — แถบเครื่องมือตกแต่งข้อความตอนตั้งโพสต์ใหม่
   ========================================================== */
.csb-compose-stage { display: flex; flex-direction: column; gap: 8px; }
.csb-compose-stage textarea { transition: background 0.15s ease, color 0.15s ease; }
.csb-textarea-bgimg { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }

.csb-style-toolbar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: var(--csb-panel);
	border-radius: 10px;
	border: 1px solid var(--csb-border);
}
.csb-toolbar-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	/* [เลย์เอาต์กระชับ — ตามที่ขอ] เดิมแต่ละแถวกว้างเต็มบรรทัดเสมอ ทำให้ปุ่มเล็กๆ (ซ้าย/กลาง/ขวา,
	   ตัวหนา/เอียง, สี) ถูกจัดเรียงเป็นแถวยาวๆ ทีละแถวไม่จำเป็น ตอนนี้ให้กว้างเท่าที่เนื้อหาต้องการ
	   แล้วปล่อยให้ container (.csb-style-toolbar) ห่อบรรทัดเอง — แถวเล็กๆ จะไปอยู่บรรทัดเดียวกัน
	   อัตโนมัติถ้าที่ว่างพอ กระชับขึ้นโดยไม่ต้องเขียน DOM ใหม่ */
	flex: 0 1 auto;
	width: auto;
}
/* แถวที่ควรกว้างเต็มเสมอ (แถบเลื่อนขนาด/รูปพื้นหลังตัวอย่าง) เพราะเป็นองค์ประกอบภาพที่ต้องการพื้นที่ */
.csb-toolbar-row:has(.csb-toolbar-range),
.csb-toolbar-bgpicker {
	flex-basis: 100%;
}
.csb-toolbar-label { font-size: 12px; color: var(--csb-ink); flex-shrink: 0; }
.csb-toolbar-btn {
	padding: 5px 12px;
	border: 1.5px solid var(--csb-border);
	border-radius: 999px;
	background: var(--csb-card);
	color: var(--csb-ink);
	font-size: 12px;
	cursor: pointer;
	transition: all 0.15s;
}
.csb-toolbar-btn:hover { border-color: var(--csb-teal); }
.csb-toolbar-active {
	background: var(--csb-teal) !important;
	border-color: var(--csb-teal) !important;
	color: var(--csb-on-accent) !important;
	font-weight: 600;
}
.csb-toolbar-range { flex: 1; min-width: 100px; accent-color: var(--csb-teal); }
.csb-toolbar-color-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--csb-ink);
	cursor: pointer;
}
.csb-toolbar-color-label input[type=color] {
	width: 28px; height: 28px;
	padding: 0;
	border: 1.5px solid var(--csb-border);
	border-radius: 6px;
	cursor: pointer;
	background: none;
}
.csb-toolbar-select {
	padding: 6px 10px;
	border: 1.5px solid var(--csb-border);
	border-radius: 8px;
	font-size: 12px;
	background: var(--csb-card);
	color: var(--csb-ink);
}
.csb-toolbar-bgpicker { gap: 6px; }
.csb-toolbar-bgthumb {
	width: 44px; height: 44px;
	border-radius: 8px;
	border: 2px solid var(--csb-border);
	background-color: white;
	background-size: cover;
	background-position: center;
	font-size: 16px;
	color: var(--csb-secondary);
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color 0.15s, transform 0.15s;
}
.csb-toolbar-bgthumb:hover { transform: translateY(-1px); }
.csb-toolbar-bgthumb.csb-toolbar-active { border-color: var(--csb-teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--csb-teal) 25%, transparent); }

/* โพสต์ที่ถูกตกแต่งสไตล์ในฟีด: ขยายเต็มความกว้างของฟองข้อความ ไม่ล็อกสีพื้นเดิม */
.csb-post-content.csb-post-styled {
	background-clip: padding-box;
	border-radius: 16px;
	min-height: 40px;
}
.csb-post.csb-right .csb-post-content.csb-post-styled,
.csb-post.csb-left .csb-post-content.csb-post-styled {
	border-color: transparent;
}