/* origin.css — แท็บบอทต้นทาง (ตาราง + ส่งทันที) ยกมาจากแบบร่างที่ตกลงกันแล้ว
   สีวันที่ส่ง / สีแชท LINE ผ่าน validate_palette ทั้งโหมดสว่าง/มืด */
/* พรีวิวแชทหน้าตาแบบ LINE: สว่าง = พื้นฟ้า บับเบิลขาว, มืด = แบบ LINE PC โหมดมืด */
:root {
	--chat-bg: #8fa9cf;
	--bubble-bg: #ffffff;
	--bubble-fg: #141414;
	--chat-name: #f4f7fb;
	--chat-link: #2459c4;
	--avatar: #c9d3df;
	--tl-bg: #e7ece9;
	/* สีประเภทข้อความในกราฟ (ตรวจแล้ว: validate_palette ผ่านทั้งโหมด, light ต้องมีตัวเลข/ตารางกำกับ) */
	--c-message: #2a78d6;
	--c-outtime: #eb6834;
	--c-lot: #1baf7a;
	--c-report: #eda100;
	--c-contact: #e87ba4;
	/* สีบอกวันที่ส่ง — ชุดนี้ผ่าน validate_palette --pairs all ทั้งโหมดสว่าง/มืด (ทุกคู่แยกออก รวมตาบอดสี) */
	--p-all: #008300;
	--p-all-fg: #ffffff;
	--p-weekday: #2a78d6;
	--p-weekday-fg: #ffffff;
	--p-weekend: #e87ba4;
	--p-weekend-fg: #0b0b0b;
	--p-custom: #eda100;
	--p-custom-fg: #0b0b0b;
	--grid: #e9eeeb;
	--emoji-font: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
	--thai-font: "Noto Sans Thai", "Leelawadee UI", Tahoma, var(--emoji-font);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--chat-bg: #222222;
		--bubble-bg: #3c3c3c;
		--bubble-fg: #f3f3f3;
		--chat-name: #b5b5b5;
		--chat-link: #6fb2ff;
		--avatar: #5a5a5a;
		--tl-bg: #1d2622;
		--c-message: #3987e5;
		--c-outtime: #d95926;
		--c-lot: #199e70;
		--c-report: #c98500;
		--c-contact: #d55181;
		--p-all: #008300;
		--p-weekday: #3987e5;
		--p-weekend: #d55181;
		--p-custom: #c98500;
		--grid: #222b27;
	}
}
:root[data-theme="dark"] {
	--chat-bg: #222222;
	--bubble-bg: #3c3c3c;
	--bubble-fg: #f3f3f3;
	--chat-name: #b5b5b5;
	--chat-link: #6fb2ff;
	--avatar: #5a5a5a;
	--tl-bg: #1d2622;
	--c-message: #3987e5;
	--c-outtime: #d95926;
	--c-lot: #199e70;
	--c-report: #c98500;
	--c-contact: #d55181;
	--p-all: #008300;
	--p-weekday: #3987e5;
	--p-weekend: #d55181;
	--p-custom: #c98500;
	--grid: #222b27;
}
/* ── หน้าบอทต้นทาง ── */
#p-origin { gap: 12px; }
#p-origin .note { margin: 0; }
.ohead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ohead-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 8px; }
.seg button { border: 0; background: transparent; font-weight: 600; color: var(--muted); padding: 6px 16px; }
.seg button.on { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }

.odays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) auto; gap: 4px; }
.odays button { display: grid; justify-items: center; gap: 0; padding: 6px 4px; font-weight: 600; font-size: 14px; }
.odays button small { font-size: 10px; font-weight: 500; color: var(--accent); line-height: 1.1; }
.odays button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.odays button.on small { color: var(--accent-fg); }
.odays button:last-child { padding-inline: 12px; }
@media (max-width: 520px) {
	.odays { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.odays button:last-child { grid-column: 1 / -1; }
}
.osum { font-size: 13.5px; }

/* ── แชทแบบ LINE ── */
.le-stage { background: var(--chat-bg); border-radius: 8px; padding: 14px 12px; }
.le-chat { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.le-avatar-lg { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--avatar); }
.le-col { display: grid; gap: 3px; min-width: 0; max-width: min(100%, 420px); }
.le-name { font-size: 11.5px; color: var(--muted); }
.le-stage .le-name { color: var(--chat-name); }
.le-bubble {
	background: var(--bubble-bg);
	color: var(--bubble-fg);
	border-radius: 4px 16px 16px 16px;
	padding: 9px 12px;
	font-family: var(--thai-font);
	font-size: 14.5px;
	line-height: 1.55;
	white-space: pre-wrap; /* LINE เก็บช่องว่างหน้าบรรทัดไว้ ต้องแสดงตามนั้น */
	overflow-wrap: anywhere;
	border: 1px solid color-mix(in srgb, var(--bubble-fg) 8%, transparent);
}
.le-bubble.clamp { max-height: 170px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.le-empty { color: var(--muted); }
.le-api { margin-top: 6px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--bubble-fg) 25%, transparent); font-size: 12px; opacity: 0.7; }

/* อิโมจิ LINE จำลอง (สีคงที่เหมือนรูปอิโมจิ ไม่เปลี่ยนตามธีม) */
.le-num {
	display: inline-block;
	font-family: "Baloo 2", "Arial Rounded MT Bold", "Nunito", sans-serif;
	font-weight: 800;
	font-size: 1.85em;
	line-height: 1;
	margin: 0 0.06em;
	vertical-align: -0.22em;
	-webkit-text-stroke: 0.6px rgb(0 0 0 / 0.28);
	text-shadow: 0 1px 0 rgb(0 0 0 / 0.12);
}
.le-num.n0 { color: #f6a7c2; }
.le-num.n1 { color: #f3a0b6; }
.le-num.n2 { color: #f5b06e; }
.le-num.n3 { color: #f1d06a; }
.le-num.n4 { color: #9fd78c; }
.le-num.n5 { color: #79cfc1; }
.le-num.n6 { color: #8ab6f0; }
.le-num.n7 { color: #b6a1ee; }
.le-num.n8 { color: #f09c8c; }
.le-num.n9 { color: #ef9a84; }
.le-num.colon { color: #c3e08a; margin: 0 0.12em; }
.le-x {
	display: inline-grid;
	place-items: center;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: #e4473b;
	color: #ffffff;
	font-size: 0.95em;
	font-weight: 900;
	line-height: 1;
	vertical-align: -0.2em;
	margin: 0 0.12em;
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.55);
}
.le-plus { color: #2f97ee; font-size: 1.45em; font-weight: 900; line-height: 1; vertical-align: -0.16em; margin: 0 0.08em; }
.le-line {
	display: inline-grid;
	place-items: center;
	background: #06c755;
	color: #ffffff;
	font: 800 0.5em/1 Arial, sans-serif;
	padding: 0.55em 0.4em;
	border-radius: 0.6em;
	vertical-align: 0.1em;
	margin: 0 0.15em;
}
.le-uni { font-family: var(--emoji-font); font-size: 1.25em; line-height: 1; vertical-align: -0.12em; margin: 0 0.05em; }
.le-custom {
	display: inline-grid;
	place-items: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 0.35em;
	background: linear-gradient(135deg, #ffb3c7, #ffd28a);
	color: #6b2340;
	font-weight: 800;
	vertical-align: -0.3em;
}
.le-dollar { color: #e4473b; font-weight: 700; }
.le-link { color: var(--chat-link); text-decoration: underline; overflow-wrap: anywhere; }
.le-contact {
	display: flex;
	gap: 10px;
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--bubble-fg) 18%, transparent);
	border-radius: 10px;
	padding: 8px 10px;
	line-height: 1.35;
}
.le-contact small { opacity: 0.7; }
.le-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--avatar); }

/* ── แผงด้านข้าง ── */
.drawer-wrap { position: fixed; inset: 0; z-index: 30; }
.drawer-bg { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); }
.drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(560px, 100%);
	background: var(--surface);
	color: var(--fg);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: -8px 0 24px rgb(0 0 0 / 0.25);
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}
.drawer-head {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
}
.drawer-body { display: grid; gap: 14px; padding: 14px 16px 24px; }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dgrid label, .dfield { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.dgrid input, .dgrid select { width: 100%; font-size: 15px; }
.dfield textarea {
	width: 100%;
	font: 15px/1.55 var(--thai-font);
	color: var(--fg);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 9px 10px;
	resize: vertical;
}
.dowpick { display: flex; flex-wrap: wrap; gap: 4px; }
.dowpick button { min-width: 40px; }
.dowpick button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.opal { display: flex; flex-wrap: wrap; gap: 4px; }
.pal-btn { min-width: 42px; min-height: 40px; display: inline-grid; place-items: center; padding: 2px 6px; background: var(--bubble-bg); color: var(--bubble-fg); font-size: 14px; }
.pick-origin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick-origin button { display: grid; gap: 2px; padding: 10px; text-align: left; color: var(--fg); }
.pick-origin button small { color: var(--muted); }
.pick-origin button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.drawer-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.drawer-foot .confirm { width: 100%; justify-content: flex-end; }
.elib { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.elib-item { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; text-align: center; }
.elib-item code { font-size: 11px; color: var(--muted); }
.elib-face { min-height: 40px; display: grid; place-items: center; background: var(--bubble-bg); color: var(--bubble-fg); border-radius: 6px; width: 100%; font-size: 15px; }
.onew { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.onew input { flex: 1 1 140px; }

/* ── ผลหวย / สถิติ / มุมมองตามหวย ── */
.keychip {
	font-size: 11.5px;
	padding: 1px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--good) 14%, var(--surface));
	color: var(--fg);
	white-space: nowrap;
}
.keychip b { font-family: var(--mono); font-weight: 600; }
.le-imgcard {
	display: grid;
	gap: 2px;
	width: min(220px, 100%);
	aspect-ratio: 4 / 3;
	place-content: center;
	text-align: center;
	border-radius: 12px;
	background: repeating-linear-gradient(135deg, var(--bubble-bg) 0 10px, color-mix(in srgb, var(--bubble-fg) 6%, var(--bubble-bg)) 10px 20px);
	color: var(--bubble-fg);
	border: 1px solid color-mix(in srgb, var(--bubble-fg) 10%, transparent);
	font-size: 13px;
}
.le-imgcard small { opacity: 0.7; font-size: 11px; padding-inline: 8px; }
.lotto-intro { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; line-height: 1.6; }
.lotto-list { display: grid; gap: 6px; }
.lotto { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.lotto.open { border-color: var(--accent); }
.lotto-head {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	padding: 10px 12px;
}
.lotto-head:hover { background: var(--surface-2); }
.lotto-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lotto-flag { font-family: var(--emoji-font); font-size: 22px; line-height: 1; }
.lotto-name { display: grid; min-width: 150px; }
.lotto-name code { font-size: 11.5px; color: var(--muted); }
.lotto-time { font-size: 13px; font-variant-numeric: tabular-nums; }
.lotto-body { border-top: 1px solid var(--line); }
.lotto-src { display: grid; gap: 6px; padding: 10px 12px; background: var(--surface-2); font-size: 13px; line-height: 1.55; }
.lotto-src code { font-size: 12px; }
.keyrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.keyrow select { flex: 1 1 220px; width: auto; }
.keyrow input { flex: 1 1 160px; width: auto; text-transform: uppercase; }
.check { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--fg); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.plan { display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.plan-row { display: grid; grid-template-columns: 48px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg); }
.plan-row:first-child { border-top: 0; }
.plan-row b { font-variant-numeric: tabular-nums; }
.plan-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.plan-row code { font-size: 11px; color: var(--muted); }
.checklist { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--warn); border-radius: 8px; font-size: 13px; line-height: 1.6; color: var(--fg); }
@media (max-width: 520px) {
	.checks { grid-template-columns: minmax(0, 1fr); }
	.plan-row { grid-template-columns: 44px auto minmax(0, 1fr); }
	.plan-row code { display: none; }
}

/* ── ไทม์ไลน์บอทต้นทาง (หน้าเดียว) ── */
/* สีบอกวันที่ส่ง: ทุกวัน = เขียว, จ–ศ = ฟ้า, ส–อา = ชมพู, บางวัน = เหลือง (ชุดที่ผ่าน validate_palette ทุกคู่ ทั้ง 2 โหมด) */
.srow.all, .dc.on.all, .daysw.all, .daytag.all { --pc: var(--p-all); --pc-fg: var(--p-all-fg); --pc-line: var(--p-all); }
.srow.weekday, .dc.on.weekday, .daysw.weekday, .daytag.weekday { --pc: var(--p-weekday); --pc-fg: var(--p-weekday-fg); --pc-line: var(--p-weekday); }
.srow.weekend, .dc.on.weekend, .daysw.weekend, .daytag.weekend { --pc: var(--p-weekend); --pc-fg: var(--p-weekend-fg); --pc-line: var(--p-weekend); }
.srow.custom, .dc.on.custom, .daysw.custom, .daytag.custom { --pc: var(--p-custom); --pc-fg: var(--p-custom-fg); --pc-line: var(--p-custom); }

.seg.big button { padding: 8px 18px; font-size: 15px; }
.seg.big button small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.daylegend { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 13px; }
.daylegend b { font-variant-numeric: tabular-nums; }
.daysw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--pc); border: 1px solid var(--pc-line); }

.slist { max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.slist .ohour { display: flex; gap: 8px; align-items: baseline; }
.omidnight {
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fg);
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
	border-top: 2px solid var(--accent);
	border-bottom: 1px solid var(--line);
}
.srow {
	display: grid;
	grid-template-columns: 76px 236px minmax(0, 1fr) auto;
	gap: 6px 12px;
	align-items: center;
	padding: 6px 12px 6px 14px;
	box-shadow: inset 4px 0 0 var(--pc-line);
}
.srow.first { border-top: 1px solid var(--line); }
.srow.next { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.srow.editing { background: var(--surface-2); }
.srow.notoday .srow-sum b { color: var(--muted); }
.srow-time { all: unset; cursor: pointer; display: grid; gap: 0; align-self: start; padding-top: 2px; }
.srow-time b { font-size: 17px; font-variant-numeric: tabular-nums; }
.srow-time:hover b { color: var(--accent); }
.srow-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.srow-days { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dowc { display: inline-flex; gap: 2px; }
.dc {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	width: 24px;
	height: 22px;
	display: grid;
	place-items: center;
	font-size: 11px;
	border-radius: 4px;
	color: var(--muted);
	border: 1px solid var(--line);
}
.dc.on { background: var(--pc); color: var(--pc-fg); border-color: var(--pc-line); font-weight: 600; }
.dc.today { box-shadow: inset 0 -3px 0 var(--fg); }
.dc:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.dc:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.daytag { font-size: 12px; color: var(--fg); white-space: nowrap; }
.daytag::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--pc); border: 1px solid var(--pc-line); vertical-align: 0; }
.srow-sum { all: unset; cursor: pointer; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-width: 0; font-size: 14px; }
.srow-sum b { font-weight: 600; white-space: nowrap; }
.srow-detail { color: var(--muted); overflow-wrap: anywhere; }
.srow-sum:hover .srow-detail, .srow-sum:hover b { color: var(--accent); }
.srow-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.srow-act { display: flex; gap: 6px; }
.keychip { font-family: var(--mono); }
@media (max-width: 760px) {
	.srow { grid-template-columns: 58px minmax(0, 1fr); }
	.srow-days, .srow-sum, .srow-act { grid-column: 2; }
	.srow-time { grid-row: span 3; }
	.srow-time.cont { grid-row: span 3; }
}

/* แก้ในแถว */
.ie { grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px; margin: 4px 0 6px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); }
.ie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ie-grid label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.ie-grid input, .ie-grid select { font-size: 15px; width: 100%; }
.ie-key { grid-column: span 2; }
.ie-key .keyrow input, .ie-key .keyrow select { width: auto; }
.ie .dowpick { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ie .dowpick .daytag { margin-left: 6px; }
.ie-msg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ie-edit { display: grid; gap: 8px; min-width: 0; }
.ie-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ie-foot .btns { display: flex; gap: 6px; }
@media (max-width: 900px) {
	.ie-msg { grid-template-columns: minmax(0, 1fr); }
	.ie-key { grid-column: auto; }
}


/* ── ของเว็บจริง: บอทต้นทาง / สวิตช์ส่งตามตาราง / ประวัติส่ง ── */
#p-origin { display: grid; }
.osender { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; line-height: 1.6; }
.osched { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-radius: 8px; padding: 8px 12px; border: 1px solid var(--line); }
.osched.is-off { background: var(--surface-2); }
.osched.is-on { background: var(--good-soft); border-color: var(--good); }
.osched.on-confirm { background: var(--warn-soft); border-color: var(--warn); }
.osched.on-confirm span { flex: 1 1 260px; }
.osent { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.osent-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); }
.osent-row:last-child { border-bottom: 0; }
.osent-row.bad { background: var(--bad-soft); }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
a.pill { text-decoration: none; }

/* ── Flex message (ตัวอย่างหน้าตา — สีของ Flex เป็นของข้อความเอง ไม่ตามธีมหน้าเว็บ) ── */
.fx-json { width: 100%; font: 12.5px/1.5 var(--mono); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px; resize: vertical; tab-size: 2; }
.fx-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fx-mount { min-width: 0; }
.fx-error { padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: 13px; }
.fx-carousel { display: flex; gap: 8px; overflow-x: auto; max-width: min(100%, 640px); padding-bottom: 4px; }
.fx-bubble {
	flex: none;
	width: min(300px, 100%);
	background: #ffffff;
	color: #111111;
	border-radius: 14px;
	overflow: hidden;
	font-family: var(--thai-font);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}
.fx-bubble.kilo { width: min(260px, 100%); }
.fx-bubble.micro { width: min(160px, 100%); }
.fx-bubble.nano { width: min(120px, 100%); }
.fx-bubble.giga { width: min(500px, 100%); } /* LINE PC วาด giga กว้างราว 500px */
.le-col:has(.fx-bubble.giga) { max-width: min(100%, 500px); }
.fx-header, .fx-body, .fx-footer { padding: 16px; }
.fx-footer { padding-top: 8px; }
.fx-box { display: flex; min-width: 0; }
.fx-box.vertical { flex-direction: column; }
.fx-box.horizontal { flex-direction: row; }
.fx-box.baseline { flex-direction: row; align-items: baseline; }
.fx-text { font-size: 15px; line-height: 1.45; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-text.fx-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-button { display: grid; place-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 15px; font-weight: 600; text-align: center; }
.fx-button.primary { background: #17c950; color: #ffffff; }
.fx-button.secondary { background: #dcdfe5; color: #111111; }
.fx-button.link { color: #42659a; }
.fx-image { display: grid; place-items: center; width: 100%; aspect-ratio: 20 / 13; background: repeating-linear-gradient(135deg, #eceff1 0 12px, #e2e6e9 12px 24px); color: #6b7378; font-size: 13px; }
.fx-sep { border: 0 solid #dddddd; border-top-width: 1px; height: 0; }
.fx-sep.fx-vsep { border-top-width: 0; border-left-width: 1px; height: auto; width: 0; align-self: stretch; flex: 0 0 auto; }
.fx-box { box-sizing: border-box; }
.fx-tap { cursor: pointer; }
.fx-icon { width: 16px; height: 16px; border-radius: 4px; background: #c9ced3; flex: 0 0 16px; }
.fx-unknown { font-size: 12px; color: #999999; }
.fx-image { position: relative; overflow: hidden; }
.fx-image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-ph { display: grid; gap: 2px; justify-items: center; padding: 8px 12px; text-align: center; }
.fx-ph small { font-size: 11px; opacity: 0.85; overflow-wrap: anywhere; }
.fx-ph .fx-ph-why { color: #8a5a00; opacity: 1; }
.fx-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.fx-route { padding: 7px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.fx-route code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.fx-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-pick button { font-family: var(--mono); font-size: 12.5px; }
@media (max-width: 560px) { .fx-names { grid-template-columns: minmax(0, 1fr); } }