/* FT420 หน้าแรก: โหมด "แต่งห้อง" (2026-09-24) — คู่กับ home-layout.js */

/* ── ปุ่มเปิด ── */
body:not([data-page=home]) #ftl-open { display: none !important; }
#brand-mood-mobile #ftl-open {
  min-height: 40px; padding: 6px 10px; border: 1px solid #a4c9c433; border-radius: 10px;
  color: #d7e8e6; font-size: 12px; background: #172b30b0;
}
#ftl-open { white-space: nowrap; }
@media (max-width: 767px) { #ftl-open .ftl-open-lbl { display: none; } #ftl-open { min-width: 40px; } }
body.ftl-editing #ftl-open { color: #062019 !important; background: #8fd2c2 !important; border-color: #8fd2c2 !important; }

/* ── ซ่อน / ย้าย / กว้าง ── */
html body .ftl-hidden.ftl-hidden.ftl-hidden { display: none !important; }
/* production.css บังคับ body.ft-scene #right-rail-aside>.scene-news{display:block!important} */
:root body.ft-scene #right-rail-aside > .scene-news.ftl-hidden { display: none !important; }
.ftl-rel { position: relative; }
html body .ftl-moved { translate: var(--ftl-dx, 0px) var(--ftl-dy, 0px); position: relative; z-index: 3; }
html body #brand-mood-balance.ftl-sized,
html body #section-home > .scene-greeting.ftl-sized { width: var(--ftl-w) !important; max-width: none !important; }
html body.ft-scene .ft-command-deck.ftl-sized { width: min(100%, calc(960px * var(--ftl-wn, 1))) !important; }
html body.ft-scene #right-rail-aside .scene-news.ftl-sized { width: calc(310px * var(--ftl-wn, 1)) !important; max-width: none !important; }

/* ── ขนาด S / M / L ── */
html body #section-home > .scene-greeting[data-ftl-size=S] h2 { font-size: 20px !important; }
html body #section-home > .scene-greeting[data-ftl-size=S] p { display: none !important; }
html body #section-home > .scene-greeting[data-ftl-size=L] h2 { font-size: clamp(28px, 3vw, 40px) !important; }
html body #section-home > .scene-greeting[data-ftl-size=L] p { font-size: 16px !important; }

html body #brand-mood-balance[data-ftl-size=S] { height: auto !important; min-height: 0 !important; }
html body #brand-mood-balance[data-ftl-size=S] .ft-home-chart-shell { display: none !important; }
html body #brand-mood-balance[data-ftl-size=L] .ft-home-chart-shell { height: 300px !important; }
html body #brand-mood-balance[data-ftl-size=L] { height: auto !important; }

html body.ft-scene .ft-command-deck[data-ftl-size=S]:not(.ftl-sized) { width: min(100%, 700px) !important; }
html body.ft-scene .ft-command-deck[data-ftl-size=L]:not(.ftl-sized) { width: min(100%, 1240px) !important; }

html body #right-rail-aside .scene-news[data-ftl-size=S] { height: auto !important; min-height: 0 !important; }
html body #right-rail-aside .scene-news[data-ftl-size=S] #right-rail-news { max-height: 110px !important; }
html body #right-rail-aside .scene-news[data-ftl-size=L] { height: auto !important; }
html body #right-rail-aside .scene-news[data-ftl-size=L] #right-rail-news { max-height: 480px !important; }

/* ── กรอบตอนแต่งห้อง ── */
.ftl-overlay {
  position: absolute; inset: 0; z-index: 20; border-radius: inherit; cursor: move; touch-action: none;
  border: 1.5px dashed rgba(143,210,194,.75); background: rgba(143,210,194,.06);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 22px rgba(143,210,194,.18) inset;
}
@media (max-width: 1023px) { .ftl-overlay { cursor: default; touch-action: auto; } }
.ftl-overlay.is-dragging { background: rgba(143,210,194,.12); border-style: solid; }
.ftl-tag {
  position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: #062019; background: #8fd2c2; pointer-events: none;
}
.ftl-grip {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; cursor: nwse-resize; border-radius: 0 0 10px 0;
  background: linear-gradient(135deg, transparent 50%, #8fd2c2 50%);
}

/* ── แผงแต่งห้อง ── */
#ftl-panel {
  position: fixed; display: block; top: 88px; right: 20px; z-index: 120; width: min(400px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 110px); overflow: auto; padding: 16px 16px 14px;
  background: #0b1a23f5; color: #e6efef; border: 1px solid #a1c6cc55; border-radius: 18px;
  box-shadow: 0 24px 65px #0009; font-family: 'Noto Sans Thai', sans-serif;
}
#ftl-panel[hidden] { display: none; }
#ftl-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
#ftl-panel h2 { margin: 0; font-size: 17px; color: #e9c07a; }
#ftl-panel header p { margin: 2px 0 0; font-size: 12px; color: #afbec3; }
#ftl-panel button { font-family: inherit; cursor: pointer; }
.ftl-x { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #a1c6cc40; background: transparent; color: #e6efef; }
.ftl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftl-list li {
  display: grid; gap: 8px; padding: 10px 11px; border-radius: 12px; border: 1px solid #a1c6cc30; background: #12232acc;
}
.ftl-list li.is-off { opacity: .6; }
.ftl-name { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; }
.ftl-name .material-symbols-outlined { font-size: 18px; color: #e9c07a; }
.ftl-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftl-order { display: flex; gap: 4px; }
.ftl-order button, .ftl-seg button {
  min-width: 36px; min-height: 34px; border-radius: 9px; border: 1px solid #a1c6cc40; background: #0b1a23; color: #e6efef; font-size: 12px;
}
.ftl-order button:disabled { opacity: .35; cursor: default; }
.ftl-fixed { font-size: 11px; color: #7d9298; padding: 0 4px; }
.ftl-seg { display: flex; border-radius: 9px; overflow: hidden; }
.ftl-seg button { border-radius: 0; margin-left: -1px; }
.ftl-seg button:first-child { border-radius: 9px 0 0 9px; margin-left: 0; }
.ftl-seg button:last-child { border-radius: 0 9px 9px 0; }
.ftl-seg button.on { background: #8fd2c2; color: #062019; font-weight: 800; border-color: #8fd2c2; }
.ftl-eye { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #afbec3; cursor: pointer; min-height: 34px; }
.ftl-eye input { width: 18px; height: 18px; accent-color: #8fd2c2; }
.ftl-tip { margin: 10px 2px 0; font-size: 11.5px; color: #7d9298; line-height: 1.5; }
#ftl-panel footer { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
#ftl-panel footer span { flex: 1; }
#ftl-panel footer button { min-height: 40px; padding: 0 14px; border-radius: 11px; font-size: 13px; }
.ftl-reset { background: transparent; color: #afbec3; border: 1px solid transparent; text-decoration: underline; padding: 0 4px !important; }
.ftl-cancel { background: transparent; color: #e6efef; border: 1px solid #a1c6cc40; }
.ftl-save { background: #e9c07a; color: #231704; border: 0; font-weight: 800; }
@media (max-width: 1023px) {
  #ftl-panel { top: auto; bottom: 10px; right: 10px; left: 10px; width: auto; max-height: 62vh; border-radius: 18px; }
}

.ftl-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 130; padding: 10px 16px; border-radius: 12px;
  background: #0b1a23f5; border: 1px solid #8fd2c280; color: #e6efef; font-size: 13px; box-shadow: 0 12px 30px #0008;
}
.ftl-toast.warn { border-color: #f2b35c99; color: #f2d3a0; }