/* คอนเทนเนอร์หลัก — โล่ง ไม่มีกรอบ/พื้นเทา ลดความซ้ำซ้อนของกรอบซ้อนกรอบ */
.lcbp-dc-wrap {
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    font-family: inherit;
    box-sizing: border-box;
}

.lcbp-dc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 18px;
}

/* ชิปหมวด — ทรงเรียวผืนผ้า เตี้ยลง (เดิมสูงจนบนมือถือบังทั้งหน้า) */
.lcbp-dc-chip {
    border: none !important;
    background: #888888 !important;
    color: #eeeeee !important;
    border-radius: 8px;
    padding: 3px 12px !important;
    font-size: 0.85em;
    line-height: 1.5;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lcbp-dc-chip:hover,
.lcbp-dc-chip:focus,
.lcbp-dc-chip.is-selected {
    /* ไล่เกรเดียนแนวตั้งสีส้ม (บน #ffb600 → ล่าง #ffcc00) ใช้ทั้งเว็บตอนโฮเวอร์/แอคทีฟ — มี fallback ในตัวเอง
       เผื่อ --dc-accent-gradient ยังไม่ถูกประกาศ (เช่นใช้ปลั๊กอินนี้กับธีมอื่นที่ไม่มีตัวแปรนี้) */
    background: var(--dc-accent-gradient, linear-gradient(180deg, #ffb600 0%, #ffcc00 100%)) !important;
    border: none !important;
    color: #2e2828 !important;
    outline: none;
}
.lcbp-dc-chip-etc { cursor: default; border: none !important; background: none !important; color: #999 !important; }

.lcbp-dc-form {
    margin-bottom: 20px;
}

.lcbp-dc-search-box {
    display: flex;
    align-items: flex-end; /* ปุ่มค้นหาอยู่ล่างสุดเมื่อช่องขยายหลายบรรทัด */
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 24px; /* โค้งพอสวยแต่ไม่กลมจนเพี้ยนเมื่อขยายหลายบรรทัด */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 6px 6px 6px 22px;
    transition: box-shadow .15s ease, border-color .15s ease;
}
/* ข้อความหลายบรรทัด — เปลี่ยนกรอบจากทรงแคปซูลเป็นสี่เหลี่ยมขอบโค้งมน */
.lcbp-dc-search-box.is-multiline {
    border-radius: 18px;
}

/* แสงส้มกระจายตัวออกเป็นระยะ (pulse วนไม่รู้จบ) — @keyframes ต้องอยู่นอก @media เสมอ (ประกาศแบบไม่มีเงื่อนไข)
   ไม่งั้นบนมือถือ (ที่ hover:hover เป็นเท็จ) เบราว์เซอร์จะไม่รู้จัก animation ชื่อนี้เลย ทำให้ :focus-within ด้านล่าง
   (ซึ่งอยากให้เล่นแอนิเมชันเดียวกันบนมือถือด้วย) ไม่ขึ้นแสงอะไรเลย */
@keyframes lcbp-dc-glow {
    0%   { box-shadow: 0 0 0 0 rgba(255, 150, 0, 0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 150, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 150, 0, 0); }
}
/* เอาเมาส์ชี้ (hover) = เล่นแอนิเมชันแสงกระจาย — เฉพาะอุปกรณ์ที่มีเมาส์จริง (@media hover:hover) เท่านั้น
   กันจอสัมผัสโดนเบราว์เซอร์ "จำลอง" :hover ค้างไว้ตอนแตะ (sticky hover) ซึ่งถ้าปล่อยให้ :hover ทำงานบนมือถือด้วย
   จะไปชนกับตอนพิมพ์ (:focus-within) เป็น 2 สถานะซ้อนกันไม่ตรงจังหวะ เห็นเป็นเคอร์เซอร์พิมพ์ลอย — ตัด :hover ออกจาก
   มือถือทั้งหมด เหลือแค่ :focus-within ตัวเดียวเป็นคนคุมแสงตอนแตะ/พิมพ์ (เล่น animation เดียวกันเป๊ะ ด้านล่าง) */
@media (hover: hover) and (pointer: fine) {
    .lcbp-dc-search-box:hover {
        border-color: #ffb600;
        animation: lcbp-dc-glow 1.6s ease-out infinite;
    }
}
/* วางเคอร์เซอร์โฟกัสในช่อง (คลิก/แตะเข้าไปพิมพ์ — คอมและมือถือ รวมถึงแถบ "ค้นหาคำตอบ" ลอยตัว .lcbp-dc-float-bar
   ที่ใช้คลาสนี้ร่วมด้วย) = เล่นแอนิเมชันแสงกระจายเดียวกันกับตอน hover ทุกอุปกรณ์ ไม่มีเงื่อนไขจำกัด
   (บนมือถือมีแค่กฎนี้ทำงานจริง เพราะ :hover ถูกตัดออกไปแล้วด้านบน จึงไม่มีทางชนกันเองจนเคอร์เซอร์ดูลอย) */
.lcbp-dc-search-box:focus-within {
    border-color: #ffb600;
    animation: lcbp-dc-glow 1.6s ease-out infinite;
}

/* ช่องพิมพ์เป็น textarea ที่ยืดสูงตามข้อความอัตโนมัติ (ดูข้อความยาวได้ทั้งหมด) */
.lcbp-dc-search-input,
.lcbp-dc-search-input:focus,
.lcbp-dc-search-input:focus-visible,
.lcbp-dc-search-input:active {
    flex: 1;
    min-width: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.6;
    padding: 12px 8px;
    resize: none;
    overflow-y: auto;
    max-height: 220px; /* ยาวมากจะเลื่อนดูภายในช่องได้ */
}

.lcbp-dc-search-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #ffb600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.lcbp-dc-search-btn:hover { background: var(--dc-accent-gradient, linear-gradient(180deg, #ffb600 0%, #ffcc00 100%)); color: #2e2828; }
.lcbp-dc-search-btn:disabled { opacity: .6; cursor: not-allowed; }
.lcbp-dc-search-btn svg { display: block; }

.lcbp-dc-result {
    min-height: 20px;
    line-height: 1.7;
    padding: 0 4px;
}

/* ช่องคำตอบ — พื้นขาว เส้นเทา (ตัดโทนครีมออก) + เงาบางๆ */
.lcbp-dc-result .lcbp-dc-answer {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 30px 38px; /* เว้นขอบให้คำตอบหายใจ (เพิ่มจากเดิม ~1 ซม.) */
    margin-bottom: 12px;
}

/* หัวข้อย่อยในคำตอบ (แนวทางจากพระสูตร / มุมมองจากงานวิจัย / ข้อเสนอแนะ ฯลฯ)
   — ป้ายวงรีสีส้มธีม (#ffb600) ตัวหนังสือขาวไม่หนา เว้นห่างจากเนื้อหาเล็กน้อย */
.lcbp-dc-answer-heading {
    display: inline-block;
    background: #ffb600;
    color: #ffffff;
    font-weight: 400;
    padding: 1px 16px;
    border-radius: 999px;
    line-height: 1.7;
    margin-bottom: 6px;
}

/* ย่อหน้าปกติในคำตอบ — บรรทัดแรกของทุกย่อหน้าย่อเข้า 2em (เหมือนกด tab) */
.lcbp-dc-answer-p {
    display: inline-block;
    text-indent: 2em;
    max-width: 100%;
}

/* บรรทัดรายการในคำตอบ — จุด • วาดด้วย ::before ที่ตำแหน่งคงที่
   ข้อความบรรทัดแรกและบรรทัดที่ตัดคำจึงเรียงตรงกันเป๊ะ และจุดเริ่มตรงระดับเดียวกับย่อหน้า (2em) */
.lcbp-dc-answer-li {
    display: inline-block;
    position: relative;
    margin-left: 2em;
    padding-left: 1.2em;
    text-indent: 0;
    max-width: calc(100% - 2em);
}
.lcbp-dc-answer-li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
}

/* บรรทัดลำดับขั้นตอนจริง (1. 2. 3. ...) — ใช้เลขจริงจาก data-num แทนจุด • เพื่อสื่อว่าต้องทำตามลำดับ */
.lcbp-dc-answer-li-num {
    padding-left: 1.6em;
}
.lcbp-dc-answer-li-num::before {
    content: attr(data-num);
    left: 0;
    font-variant-numeric: tabular-nums;
}

.lcbp-dc-result .lcbp-dc-error {
    color: #a33;
    background: #fdecec;
    border: 1px solid #f3caca;
    border-radius: 8px;
    padding: 12px 16px;
}

.lcbp-dc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #888;
    padding: 16px 0;
}

.lcbp-dc-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #a78bfa, #60a5fa, #f472b6, #a78bfa);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: lcbp-dc-spin 0.9s linear infinite;
}

@keyframes lcbp-dc-spin {
    to { transform: rotate(360deg); }
}

.lcbp-dc-recent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 720px;
    margin: 10px auto 20px;
    font-size: 0.85em;
}

.lcbp-dc-recent-label {
    color: #888;
}

.lcbp-dc-recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lcbp-dc-recent-chip {
    border: 1px dashed #bbb !important;
    background: transparent !important;
    color: #666 !important;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.95em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lcbp-dc-recent-chip:hover,
.lcbp-dc-recent-chip:focus {
    background: var(--dc-accent-gradient, linear-gradient(180deg, #ffb600 0%, #ffcc00 100%)) !important;
    border-color: #ffb600 !important;
    color: #2e2828 !important;
    outline: none;
}

/* หมายเหตุ — กล่องพื้นครีม เส้นครีม + ไอคอนตกใจวงกลมสีส้ม */
.lcbp-dc-disclaimer-static,
.lcbp-dc-answer-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8em;
    color: #7a6a4f;
    background: #fdf7e7;
    border: 1px solid #f0e3bf;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 18px;
    line-height: 1.6;
}
.lcbp-dc-disclaimer-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: #f0821e;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}
.lcbp-dc-disclaimer-text { flex: 1; }

/* disclaimer แบบเก่าที่ฝังเป็น <p class="lcbp-qa-disclaimer"> ในหน้าคำถาม-คำตอบที่เผยแพร่ไปแล้ว
   — แต่งให้เป็นกล่องพื้นครีม + ไอคอนตกใจวงกลมส้ม (ผ่าน ::before) หน้าตาเดียวกับหน้าแรก
   โดยไม่ต้องไล่แก้เนื้อหาหน้าเก่าทีละหน้า (หน้าใหม่ฝัง markup กล่องแบบเดียวกับหน้าแรกอยู่แล้ว) */
.lcbp-qa-disclaimer {
    position: relative;
    font-size: 0.8em;
    color: #7a6a4f;
    background: #fdf7e7;
    border: 1px solid #f0e3bf;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 12px 16px 12px 46px;
    margin-top: 18px;
    line-height: 1.6;
}
.lcbp-qa-disclaimer::before {
    content: "!";
    position: absolute;
    left: 16px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f0821e;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}

.lcbp-dc-permalink {
    font-size: 0.8em;
    margin-top: -4px;
    margin-bottom: 12px;
}
.lcbp-dc-permalink a { color: #8a5a1f; text-decoration: none; }

/* บล็อกแหล่งอ้างอิงในหน้าตอบคำถามสด — ให้หน้าตาเหมือนหน้า SEO (พระสูตรอ้างอิง / งานวิจัยอ้างอิง)
   เว้นระยะห่างจากกรอบคำตอบ และย่อขนาดทั้งก้อนลง ~10% ให้เป็นส่วนประกอบรอง ไม่แย่งความเด่นจากคำตอบ */
.lcbp-dc-refs {
    margin: 28px 0 12px;
    font-size: 0.9em;
}
.lcbp-dc-refs .lcbp-refs-block {
    margin-bottom: 10px;
}
.lcbp-dc-refs .lcbp-refs-heading {
    font-size: 1.15em;
    font-weight: 700;
    color: #7a3b12;
    margin: 14px 0 8px;
}
.lcbp-dc-refs .lcbp-qa-refs {
    margin: 0;
    padding-left: 1.4em;
    line-height: 1.7;
}
.lcbp-dc-refs .lcbp-qa-refs li {
    margin-bottom: 8px;
}
.lcbp-dc-refs .lcbp-qa-refs a {
    color: #8a5a1f;
    text-decoration: none;
}
/* โฮเวอร์ใช้สีส้มหลักของธีมเดียวกันทุกที่ (var(--dc-accent) = #ffb600) แทนสีน้ำตาลอมส้มเดิม (#c8791f) ที่หลุดโทน */
.lcbp-dc-refs .lcbp-qa-refs a:hover {
    color: var(--dc-accent, #ffb600);
}

/* แผงหมวด (เปิดเมื่อกดชิป) + รายการคำถามที่ตอบแล้ว / คำถามไกด์ */
.lcbp-dc-cat-panels {
    margin: 4px 0 8px;
}
.lcbp-dc-cat-panel {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.lcbp-dc-cat-title {
    font-weight: 700;
    color: #7a3b12;
    margin-bottom: 8px;
    font-size: 0.98em;
}
.lcbp-dc-qa-list {
    margin: 0;
    padding-left: 1.3em;
    line-height: 1.75;
}
.lcbp-dc-qa-list li { margin-bottom: 4px; }
.lcbp-dc-qa-list a {
    color: #8a5a1f;
    text-decoration: none;
}
/* โฮเวอร์ใช้สีส้มหลักของธีมเดียวกันทุกที่ (var(--dc-accent) = #ffb600) แทนสีน้ำตาลอมส้มเดิม (#c8791f) ที่หลุดโทน
   ตัดเส้นใต้ตอนโฮเวอร์ออกแล้ว (เดิม border-bottom-color) เหลือแค่เปลี่ยนสีตัวหนังสือ */
.lcbp-dc-qa-list a:hover {
    color: var(--dc-accent, #ffb600);
}

/* ปุ่มคำถามไกด์ (.lcbp-dc-seed) อยู่ในแถวตาราง .lcbp-dc-rows แล้ว — ใช้สไตล์แถวเดียวกันทั้งหมด
   (ตัดทรงปุ่มเทา/ขอบมน/เครื่องหมายคำพูดเดิมออก ให้หน้าตาเหมือนลิงก์คำตอบทุกแถว) */

/* คำถามที่ตอบแล้ว (รวมทุกหมวด) */
.lcbp-dc-faq {
    margin: 18px 0 8px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}
.lcbp-dc-faq-title {
    font-weight: 700;
    color: #7a3b12;
    margin-bottom: 8px;
}


/* รายการค้นในคลัง (ฟรี) */
.lcbp-dc-list-block{margin-top:18px;padding:14px 16px;background:#faf7f0;border:1px solid #ece3d0;border-radius:10px}
.lcbp-dc-list-title{font-weight:700;color:#7a5c1e;margin-bottom:8px}
.lcbp-dc-list-h{font-weight:600;color:#5a4a2a;margin:10px 0 4px}
.lcbp-dc-list-ul{margin:0 0 6px;padding-left:20px}
.lcbp-dc-list-ul li{margin:3px 0;line-height:1.55}
.lcbp-dc-list-ref{color:#a08a5a;font-size:.92em}
.lcbp-dc-list-block a{color:#2a6a9a}
/* เดิมไม่มี :hover กำหนดไว้เลย (เสี่ยงค้างเป็นสีน้ำเงินเวลาชี้ ถ้า a:hover ของธีมโดนแซงคิวลำดับ CSS) — บังคับสีส้ม
   หลักของธีมตอนโฮเวอร์ให้ชัดเจน สม่ำเสมอกับที่อื่นทั้งเว็บ */
.lcbp-dc-list-block a:hover, .lcbp-dc-list-block a:focus { color: var(--dc-accent, #ffb600); }


/* Overlay ระหว่างกำลังค้นหา — พื้นหลังเบลอเหมือนกระจกฝ้า + การ์ดขาวขอบมน */
.lcbp-dc-overlay{
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(110,110,120,.30);
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    animation:lcbp-dc-fade .2s ease;
}
@keyframes lcbp-dc-fade{ from{opacity:0} to{opacity:1} }
.lcbp-dc-loading-card{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:24px;
    background:#fff; border-radius:24px;
    padding:48px 60px;
    box-shadow:0 20px 55px rgba(0,0,0,.20);
    min-width:250px; max-width:80vw;
    animation:lcbp-dc-pop .25s ease;
}
@keyframes lcbp-dc-pop{ from{transform:scale(.92); opacity:0} to{transform:scale(1); opacity:1} }
.lcbp-dc-loading-card .lcbp-dc-spinner{
    width:64px; height:64px;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));
            mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));
}
.lcbp-dc-loading-text{
    color:#8a8a8a; font-size:16px; line-height:1.5; text-align:center;
}

/* ── รายการคำถามสไตล์ "ตาราง" (.lcbp-dc-rows / .lcbp-dc-row) ──
      ตั้งใจเว้นสี/ระยะห่าง/มุมโค้ง/โฮเวอร์ไว้ให้ "ธีม" (dhamma-consult/style.css) เป็นผู้กำหนดจุดเดียว
      ที่นี่คุมแค่โครงสร้างที่จำเป็นให้ทำงานได้ ไม่ผูกกับหน้าตา — แก้สไตล์ให้ไปแก้ที่ธีมที่เดียว ไม่ต้องแก้ 2 ที่
      (ถ้านำปลั๊กอินไปใช้กับธีมอื่นที่ไม่มีกฎชุดนี้ แถวจะยังกดได้ปกติ เพียงไม่มีสีโฮเวอร์แต่งไว้) */
.lcbp-dc-rows{
    border:0;
    background:transparent;
}
.lcbp-dc-rows .lcbp-dc-row{
    display:block; width:100%;
    box-sizing:border-box;
    text-align:left;
    background:transparent;
    border:0;
    margin:0 !important;
    font:inherit; font-size:.92em; line-height:1.55;
    text-decoration:none;
    cursor:pointer;
}
.lcbp-dc-row-empty{ padding:10px 14px; color:#999; font-size:.9em; }

/* ── มือถือ: แถบ "ค้นหาคำตอบ" ลอยตัวติดขอบล่างจอ (ทุกหน้า) ──
   ใช้คลาส .lcbp-dc-search-box เดิมทั้งดุ้น (หน้าตา/แสงส้มกระจายตอนชี้-โฟกัส เหมือนช่องค้นหาหน้าแรกทุกอย่าง)
   คลาสนี้เพิ่มแค่การปักหมุดลอยตัว (position:fixed) ทับ max-width/margin เดิมที่ออกแบบไว้สำหรับวางอยู่กลางหน้า
   สูง ~54px (ปุ่มวงกลม 42px + padding บน-ล่าง 6+6) ระยะจากขอบล่างจอ 20px ตามที่ตั้งใจ
   ปุ่มหมวดปัญหา (.lcbp-dc-fab ด้านล่าง) ต้องลอยอยู่ "เหนือ" แถบนี้เสมอ กันบังกัน — ดูเลขคำนวณที่ comment ของมันด้วย */
.lcbp-dc-float-bar{
    display:none !important; /* !important กันโดนกฎ .lcbp-dc-search-box{display:flex} (บรรทัดต้นไฟล์) ทับบนคอม */
    position:fixed; left:16px; right:16px; bottom:20px; z-index:9989;
    max-width:none; margin:0;
    align-items:center;
}
/* จุดต่างจาก .lcbp-dc-search-box ทั่วไป: แถบนี้ position:fixed ติดขอบล่างจอโดยตรง (bottom:20px)
   พอแป้นพิมพ์บนหน้าจอมือถือโผล่ขึ้นตอนแตะเข้าไปพิมพ์ เบราว์เซอร์มือถือบางตัว (โดยเฉพาะ iOS Safari) จะคำนวณ
   ตำแหน่ง fixed ใหม่ระหว่างที่คีย์บอร์ดกำลังเลื่อนขึ้น ทำให้ทั้งกล่อง (พร้อมเคอร์เซอร์พิมพ์ข้างใน) ขยับ/เด้งจริงๆ
   ชั่วขณะ — ถ้ายังมีแอนิเมชันแสงพัลส์วนไม่รู้จบทำงานซ้อนอยู่ด้วย (จากกฎ .lcbp-dc-search-box:focus-within ทั่วไป)
   จะยิ่งเห็นชัดเป็น "เคอร์เซอร์ลอยตามแสง" — ตัดเฉพาะแอนิเมชันของแถบนี้ออกตอนโฟกัส เหลือแค่แสงฟุ้งค้างนิ่งๆ แทน
   (ช่องค้นหาอื่นที่ไม่ใช่ position:fixed ไม่เจอปัญหานี้ ยังกระพริบแสงต่อได้ตามปกติ) ใส่ !important กันแน่นอน
   เพราะ specificity เท่ากับกฎทั่วไปทุกประการ (ต่างกันแค่ไฟล์ธีม/ปลั๊กอินไหนโหลดทีหลัง ผลอาจไม่แน่นอน) */
.lcbp-dc-float-bar:focus-within{
    animation: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 0 0 6px rgba(255,150,0,.28) !important;
}

/* ── มือถือ: ปุ่มไอคอนส้มลอย (FAB) เปิดลิ้นชักหมวดปัญหา + แถบข้างหมวดหมู่ฝั่งขวา ──
   bottom:90px = ให้พ้นแถบค้นหาคำตอบด้านบน (.lcbp-dc-float-bar: จาก 20px ถึง 20+54=74px จากขอบล่างจอ)
   บวกช่องไฟหายใจอีก ~16px กันสองปุ่มติดกันเกินไป (20+54+16 ≈ 90) */
/* ไอคอนเป็นรูปเณร (ดู class-shortcode.php) แทน SVG เดิม — ขยับตัวเบาๆ ตลอดเวลา (lcbp-dc-fab-bob)
   คล้ายปลั๊กอิน LCBP Smart Assistant (เณรน้อยเลี่ยงเชียง) แต่ตั้งใจ "ไม่มี" วงแสงพัลส์ (::before/::after ของปลั๊กอินนั้น)
   เหลือแค่การขยับตัว/โยกเบาๆ เท่านั้นตามที่ต้องการ */
.lcbp-dc-fab{
    display:none !important;
    position:fixed; right:16px; bottom:90px; z-index:9990;
    width:52px; height:52px;
    border:0; border-radius:50%;
    background:#ffb600; color:#fff;
    box-shadow:0 4px 14px rgba(255,150,0,.45);
    align-items:center; justify-content:center;
    cursor:pointer; padding:0; overflow:hidden;
    transition:background .15s ease, transform .15s ease, box-shadow .2s ease;
    animation: lcbp-dc-fab-bob 2.8s ease-in-out infinite;
}
@keyframes lcbp-dc-fab-bob{
    0%,100%{ transform:translateY(0) rotate(-3deg); }
    25%{ transform:translateY(-5px) rotate(1deg); }
    50%{ transform:translateY(-3px) rotate(2deg); }
    75%{ transform:translateY(-6px) rotate(-1deg); }
}
.lcbp-dc-fab:hover{ box-shadow:0 6px 18px rgba(255,150,0,.55); }
.lcbp-dc-fab:active{ transform:scale(.94); }
.lcbp-dc-fab img{
    display:block; width:100%; height:100%;
    object-fit:cover; border-radius:50%; pointer-events:none;
}

.lcbp-dc-drawer-overlay{
    position:fixed; inset:0; z-index:9991;
    background:rgba(0,0,0,.3);
}
.lcbp-dc-drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:9992;
    width:min(84vw, 340px);
    background:#fff;
    box-shadow:-6px 0 24px rgba(0,0,0,.16);
    display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform .22s ease;
}
.lcbp-dc-drawer.is-open{ transform:translateX(0); }
.lcbp-dc-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    font-weight:700; color:#000;
    border-bottom:1px solid #ececec;
}
/* ช่องค้นหาเรื่องเก่าด้านบนสุดของ drawer — ใช้คลาส dc-side-search ของธีม (หน้าตา/ฟอนต์กันซูมเดียวกับแถบข้าง)
   ที่นี่ปรับแค่ระยะ/ขนาดให้พอดีกับแถวหัว drawer (ของเดิมออกแบบไว้สำหรับวางเรียงเป็นคอลัมน์ในแถบข้าง) */
.lcbp-dc-drawer-head .lcbp-dc-drawer-search{
    flex:1; min-width:0; margin:0;
}
.lcbp-dc-drawer-close{
    border:0; background:none; cursor:pointer;
    font-size:26px; line-height:1; color:#888;
    padding:0 4px;
}
.lcbp-dc-drawer-close:hover{ color:#ffb600; }
.lcbp-dc-drawer-body{ flex:1; overflow-y:auto; padding:10px 12px 20px; }
.lcbp-dc-drawer-cat{ margin-bottom:6px; }
.lcbp-dc-drawer-cat-btn{
    display:flex; align-items:center; justify-content:space-between;
    width:100%;
    border:0; border-radius:8px;
    background:#f0f0ec; color:#333;
    padding:8px 12px;
    font:inherit; font-size:.95em; text-align:left;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}
.lcbp-dc-drawer-cat-btn:hover,
.lcbp-dc-drawer-cat-btn[aria-expanded="true"]{ background:var(--dc-accent-gradient, linear-gradient(180deg, #ffb600 0%, #ffcc00 100%)); color:#2e2828; }
.lcbp-dc-drawer-caret{ transition:transform .18s ease; }
.lcbp-dc-drawer-cat-btn[aria-expanded="true"] .lcbp-dc-drawer-caret{ transform:rotate(90deg); }
.lcbp-dc-drawer-cat-items{ margin:6px 2px 10px; }
.lcbp-dc-drawer-cat-items .lcbp-dc-row{ font-size:.88em; }

/* จอเล็ก: ซ่อนชิป+แผงหมวดบนหน้า (บังทั้งหน้า) → ใช้ FAB + drawer แทน
   ใส่ !important เพราะ CSS ของธีมโหลดทีหลังและประกาศ display:flex ไว้ จะทับกฎนี้ */
@media (max-width: 900px){
    .lcbp-dc-chips,
    .lcbp-dc-cat-panels{ display:none !important; }
    .lcbp-dc-fab{ display:flex !important; }
    .lcbp-dc-float-bar{ display:flex !important; }

    /* ช่องค้นหาโล่งเด่น: ฟอนต์ 16px ขึ้นไปกัน iOS ซูมหน้าอัตโนมัติตอนจิ้มพิมพ์
       (ตัวการที่ทำให้กรอบ/ปุ่มค้นหาล้นออกนอกจอ) + ล็อกความสูงไม่ให้กรอบขยาย */
    .lcbp-dc-search-input{
        font-size:16px !important;
        height:auto !important;
        max-height:96px; /* ยาวมากเลื่อนดูในช่องแทน ไม่ดันกรอบ */
    }
    .lcbp-dc-search-box,
    .lcbp-dc-search-box.is-multiline{ border-radius:24px; }

    /* ช่องค้นหาลอยตัวติดขอบล่างจอ (มือถือเท่านั้น) — เปลี่ยนเส้นขอบจากเทา (var(--dc-border) ปกติ)
       เป็นสีส้มหลักของธีม (var(--dc-accent)) ให้เด่นสมกับเป็นปุ่มค้นหาหลักบนจอเล็ก ความหนาเส้นเท่าเดิม (1px
       ตามที่ .lcbp-dc-search-box กำหนดไว้แล้ว ที่นี่แก้แค่สี ไม่แตะ border-width/style)
       ต้องใส่ !important: .lcbp-dc-float-bar ใช้คลาส .lcbp-dc-search-box ร่วมด้วย และธีม (dhamma-consult/style.css)
       ประกาศ .lcbp-dc-search-box{ border:1px solid var(--dc-border); ... } ซ้ำไว้ทับปลั๊กอินอีกที (คอมเมนต์
       เดียวกับด้านบนของไฟล์นี้) — specificity เท่ากัน (คลาสเดียว) แต่ธีมโหลดทีหลังเสมอ ฝั่งนั้นเป็น border
       แบบ shorthand ที่ล้างค่า border-color กลับเป็นเทาทุกครั้ง ถ้าไม่ใส่ !important ที่นี่สีส้มจะไม่ขึ้นจริงบนเว็บ
       (พิสูจน์แล้วจากการตรวจ cascade จริงบนเว็บไซต์ — ไม่ใช่แค่ทฤษฎี) */
    .lcbp-dc-float-bar{ border-color: var(--dc-accent, #ffb600) !important; }
}