/* ใช้ตัวแปรสีชุดเดียวกับ mes789-profile-core (--mes-*) ถ้าโมดูลนั้นโหลดอยู่แล้วจะใช้ค่าเดียวกันทั้งเว็บ
   ถ้ายังไม่มี ให้ค่า fallback ตรงนี้ไว้กันพัง */
:root {
	--mes-bg-void:  #0C0C0E;
	--mes-bg-card:   #121212;
	--mes-bg-nav:     #1C1C1E;
	--mes-border:      #2C2C2E;
	--mes-text-body: #E0E0E0;
	--mes-text-meta:  #8E8E93;
	--mes-gold:          #D4AF37;
	--mes-red:            #8B0000;
}

body { background: var(--mes-bg-void); }
.entry-title, .page-title, h1.entry-title { display: none !important; } /* ซ่อนหัวข้อเพจมาตรฐาน ใช้ header ของ Shell แทน */

.mps-shell { max-width: 1500px; margin: 0 auto; }

/* --- Topbar --- */
.mps-topbar {
	position: sticky; top: 0; z-index: 500;
	display: flex; align-items: center; justify-content: space-between;
	background: var(--mes-bg-nav);
	border-bottom: 1px solid var(--mes-border);
	padding: 0 16px; height: 56px;
	gap: 16px;
}

/* ซ้าย: โลโก้ + ช่องค้นหา */
.mps-header-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.mps-brand { display: flex; align-items: center; text-decoration: none; }
.mps-brand-logo { height: 36px; width: auto; display: block; }
.mps-search-box {
	display: flex; align-items: center; gap: 6px;
	background: var(--mes-bg-void);
	border: 1px solid var(--mes-border);
	border-radius: 20px;
	padding: 6px 14px;
}
.mps-search-box input {
	background: transparent; border: none; outline: none;
	color: var(--mes-text-body); font-size: 13px; width: 140px;
}
.mps-search-icon { font-size: 13px; opacity: .7; }

/* กลาง: ไอคอนนำทาง 5+1 ปุ่ม */
.mps-header-center { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; justify-content: center; }
.mps-header-nav-item {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 44px; border-radius: 8px;
	color: var(--mes-text-meta); text-decoration: none; font-size: 20px;
}
.mps-header-nav-item:hover, .mps-header-nav-item.mps-active { background: var(--mes-bg-card); color: var(--mes-gold); }
.mps-header-reserved { opacity: .45; cursor: not-allowed; }

/* ขวา: ปุ่มไอคอนเดี่ยว + avatar */
.mps-header-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mps-icon-btn {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--mes-bg-card); color: var(--mes-gold, #D4AF37);
	border: 1px solid rgba(212,175,55,.35);
	text-decoration: none; font-size: 16px;
	transition: background .15s, border-color .15s;
}
.mps-icon-btn:hover { background: var(--mes-border); border-color: var(--mes-gold, #D4AF37); }
.mps-svg-icon-btn svg { display: block; filter: drop-shadow(0 0 0 transparent); transition: filter .15s; }
.mps-svg-icon-btn:hover svg { filter: drop-shadow(0 0 3px rgba(212,175,55,.7)); }

.mps-avatar-menu { position: relative; }
.mps-avatar-toggle { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.mps-icon-btn.mps-avatar-toggle {
	background: var(--mes-bg-card);
	color: var(--mes-text-body);
	line-height: normal;
}
.mps-icon-btn.mps-avatar-toggle:hover { background: var(--mes-border); }

/* --- [เพิ่มโดย Claude] หมวดหมู่ "กลุ่มและเพจ" ในเมนูซ้าย --- */
.mps-left-menu-secondary { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mes-border); }
.mps-menu-category-label { color: var(--mes-text-meta); font-size: 12px; padding: 4px 14px 8px; text-transform: uppercase; letter-spacing: .04em; }
.mps-header-avatar { width: 38px !important; height: 38px !important; min-width:38px; min-height:38px; border-radius: 50% !important; object-fit: cover; display: block; flex-shrink: 0; aspect-ratio: 1/1; }
.mps-header-login { color: var(--mes-text-body); text-decoration: none; font-size: 14px; }

.mps-avatar-dropdown {
	display: none;
	position: absolute; top: 48px; right: 0;
	width: 260px;
	background: var(--mes-bg-card);
	border: 1px solid var(--mes-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.4);
	padding: 8px;
	z-index: 600;
}
.mps-avatar-dropdown.mps-open { display: block; }
.mps-dropdown-profile-row {
	display: flex; align-items: center; gap: 10px;
	padding: 8px; margin-bottom: 6px;
	border-bottom: 1px solid var(--mes-border);
}
.mps-dropdown-profile-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.mps-dropdown-profile-row span { color: var(--mes-text-body); font-size: 14px; font-weight: 600; }
.mps-dropdown-item {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 8px; border-radius: 6px;
	color: var(--mes-text-body); text-decoration: none; font-size: 13px;
}
.mps-dropdown-item:hover { background: var(--mes-bg-nav); }
.mps-dropdown-disabled { opacity: .5; cursor: not-allowed; }
.mps-soon { margin-left: auto; font-size: 11px; color: var(--mes-gold); }
.mps-dropdown-divider { border: none; border-top: 1px solid var(--mes-border); margin: 6px 0; }
.mps-dropdown-logout { color: var(--mes-red); }

@media (max-width: 900px) {
	.mps-search-box { display: none; }

	/* แยกเป็น 2 บรรทัด: บรรทัดบน = โลโก้ + ไอคอนขวา / บรรทัดล่าง = แถวไอคอนนำทาง เต็มความกว้าง */
	.mps-topbar {
		flex-wrap: wrap;
		height: auto;
		padding: 8px 12px 0;
	}
	.mps-header-left  { order: 1; flex: 1 1 auto; }
	.mps-header-right { order: 2; flex: 0 0 auto; }
	.mps-header-center {
		order: 3;
		flex: 1 0 100%;
		justify-content: space-around;
		gap: 0;
		margin-top: 8px;
		border-top: 1px solid var(--mes-border);
	}
	.mps-header-nav-item { flex: 1 1 0; width: auto; height: 46px; border-radius: 0; }
}
@media (max-width: 480px) {
	.mps-topbar { padding: 8px 8px 0; gap: 8px; }
	.mps-header-right { gap: 4px; }
	.mps-icon-btn { width: 34px; height: 34px; font-size: 14px; }
	.mps-header-avatar { width: 34px; height: 34px; }
	.mps-brand-logo { height: 30px; }
}

/* --- Grid 3 คอลัมน์ --- */
.mps-grid {
	display: grid;
	grid-template-columns: 260px 1fr 300px;
	gap: 16px;
	padding: 16px;
	align-items: start;
}
.mps-col-left, .mps-col-right {
	position: sticky; top: 76px;
	max-height: calc(100vh - 96px);
	overflow-y: auto;
}
.mps-col-center {
	background: var(--mes-bg-card);
	border: 1px solid var(--mes-border);
	border-radius: 10px;
	padding: 20px;
	min-height: 400px;
	color: var(--mes-text-body);
}

/* --- เมนูซ้าย (5 แกนหลัก) --- */
.mps-left-menu { display: flex; flex-direction: column; gap: 4px; }
.mps-menu-item {
	display: flex; align-items: center; gap: 10px;
	color: var(--mes-text-body); text-decoration: none;
	padding: 10px 14px; border-radius: 8px; font-size: 14px;
}
.mps-menu-item:hover, .mps-menu-item.mps-active { background: var(--mes-bg-nav); color: var(--mes-gold); }
.mps-menu-icon { font-size: 16px; }

/* --- คอลัมน์ขวา (พื้นที่โฆษณา/ประกาศ) --- */
.mps-widget-box {
	background: var(--mes-bg-card);
	border: 1px solid var(--mes-border);
	border-radius: 10px;
	padding: 16px;
}
.mps-widget-title { color: var(--mes-gold); margin: 0 0 8px; font-size: 14px; }
.mps-widget-empty { color: var(--mes-text-meta); font-size: 12px; margin: 0; }

.mps-empty-state { color: var(--mes-text-meta); }
.mps-loading { color: var(--mes-text-meta); text-align: center; padding: 40px 0; }

/* --- แพตช์ปรับตัวบอร์ด (Chat Story Board) เวลาถูกวางในคอลัมน์กลางของ Shell ---
   ตัวบอร์ดเดิมมี 3 คอลัมน์ของตัวเอง (#csb-sidebar-left / #csb-feed-container / #csb-sidebar-right)
   ค่าเริ่มต้น: ซ่อนซ้าย-ขวาไว้ก่อนถ้ายังอยู่ในคอลัมน์กลาง (กันเผื่อ JS ย้ายไม่ทัน/ปิด JS ไว้ ไม่ให้ซ้อนกันน่าเกลียด)
   ของจริง JS (mps-board-bridge.js) จะย้าย element เดิมไปไว้ในคอลัมน์ซ้าย/ขวาของ Shell แทน แล้วกฎด้านล่างจะทำให้มันโชว์ */
.mps-col-center #csb-sidebar-left,
.mps-col-center #csb-sidebar-right {
	display: none !important;
}
.mps-col-center #csb-feed-container,
.mps-col-center .csb-board-wrapper {
	width: 100% !important;
	max-width: 100% !important;
}
.mps-col-center #csb-3col-layout {
	display: block !important; /* ปลด grid/flex เดิมของบอร์ด ให้เหลือแค่บล็อกเดียว */
}

/* ห้องต่างๆ/ลัดด่วน ของบอร์ด ถูกย้าย (DOM relocation) มาไว้ในคอลัมน์ของ Shell แล้ว — ปรับสไตล์ให้กลืนเป็นเนื้อเดียวกัน */
.mps-col-left #csb-sidebar-left,
.mps-col-right #csb-sidebar-right {
	display: block !important;
	position: static !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-top: 16px !important;
	border-top: 1px solid var(--mes-border) !important;
	padding-top: 16px !important;
}

/* --- แถบเมนูล่างสำหรับมือถือ (โผล่เฉพาะจอเล็ก) --- */
.mps-mobile-tabbar {
	display: none;
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
	background: var(--mes-bg-nav);
	border-top: 1px solid var(--mes-border);
	justify-content: space-around;
	padding: 8px 0;
}
.mps-tab-item { color: var(--mes-text-body); text-decoration: none; font-size: 20px; }
.mps-tab-item:hover, .mps-tab-item.mps-active { color: var(--mes-gold); }

/* --- Responsive ตามสเปกที่ตกลง --- */
@media (max-width: 1099px) {
	.mps-grid { grid-template-columns: 1fr; padding: 8px; }
	.mps-col-left, .mps-col-right { display: none; }
	.mps-col-center { border-radius: 0; border-left: none; border-right: none; }
	.mps-mobile-tabbar { display: none; }
}

/* --- กันเนื้อหาล้นขอบจอมือถือ (วิดีโอ/รูป/iframe จากโพสต์เงาบทความ มักมีความกว้างตายตัวเกินจอ) --- */
html, body { max-width: 100%; overflow-x: hidden; }
.mps-shell, .mps-grid, .mps-col-center, .mps-col-left, .mps-col-right {
	max-width: 100%;
	box-sizing: border-box;
}
.mps-col-center img,
.mps-col-center iframe,
.mps-col-center video,
.mps-col-center embed,
.mps-col-center table {
	max-width: 100% !important;
	height: auto !important;
}
.mps-col-center * {
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.mps-col-center {
	overflow-x: hidden !important;
}

/* 🚫 กันชน: ซ่อนเศษเหลือของ header/nav ธีมเดิม เผื่อหลุดมาโผล่ (ตอนนี้ shell เป็น standalone ไม่ควรมีอะไรหลุดมาแล้ว แต่กันไว้) */
body.mps-standalone-shell header:not(.mps-topbar),
body.mps-standalone-shell nav:not(.mps-mobile-tabbar):not(.mps-header-center),
body.mps-standalone-shell .site-header,
body.mps-standalone-shell #site-header,
body.mps-standalone-shell #masthead,
body.mps-standalone-shell .main-navigation,
body.mps-standalone-shell .theme-header {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}