/* ===========================================
   NITED Skill Hub — ส่วนเสริมเฉพาะคลัง Skill
   ⚠️ หน้าตาหลักทั้งหมดใช้ prompts.css (คลาส ph-*) ร่วมกับคลัง Prompt — เจ้าของสั่ง "ให้เหมือนเป๊ะ" (2026-10-12)
      ไฟล์นี้มีเฉพาะชิ้นที่คลัง Prompt ไม่มี (รายการไฟล์ · เวอร์ชัน · ขั้นตอนติดตั้ง) และใช้โทนสีชุดเดียวกับ prompts.css
      ⛔ ห้ามใส่สี/ปุ่มชุดใหม่ที่นี่ — อยากเปลี่ยนหน้าตาให้แก้ที่ prompts.css (สองคลังจะเปลี่ยนตามกัน)
   =========================================== */

/* ไอคอน emoji แทนรูปปก (ไม่มีรูป) — วางบนพื้น .ph-thumb-empty แบบเดียวกับ prompt ที่ไม่มีรูป */
.sk-emoji{font-size:3.4rem;line-height:1;filter:drop-shadow(0 8px 16px rgba(37,99,235,.14))}
.sk-emoji.lg{font-size:5.2rem}
.sk-emoji.sm{font-size:1.5rem;filter:none}
.sk-emoji.td{display:inline-flex;align-items:center;justify-content:center;width:54px;height:42px;border-radius:8px;border:1px solid #e9f1fb;background:linear-gradient(135deg,#f1f7ff,#eaf1fb);font-size:1.4rem;filter:none}
.ph-myrow-thumb .sk-emoji.sm{font-size:1.15rem}

/* ปุ่ม: ตัวอักษรรองในปุ่มดาวน์โหลด (ขนาดไฟล์) */
.sk-btn-sub{font-weight:600;font-size:.78rem;opacity:.85}
.sk-actions{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 16px}

/* กล่อง "ใช้เมื่อไหร่" — โทนเดียวกับกล่องเครดิต/ปุ่ม AI ของหน้า prompt */
.sk-when{background:#f7fbff;border:1px solid #e6f0fb;border-radius:16px;padding:14px 18px;margin-bottom:16px}
.sk-when-head{font-weight:700;color:#0f2356;font-size:.95rem;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sk-when-head i{color:#2563eb}
.sk-when ul{margin:0;padding-left:20px}
.sk-when li{font-size:.92rem;color:#1f3357;line-height:1.9}

/* กล่อง SKILL.md (ใช้ .ph-content-box) — เนื้อยาวกว่า prompt มาก จึงจำกัดความสูงไว้ */
.sk-md-box pre{max-height:520px;overflow:auto}

/* วิธีติดตั้ง (ใช้ .ph-panel + .ph-chip เป็นแท็บ) */
.sk-install{margin-top:16px}
.sk-tabs{margin-bottom:14px;gap:8px}
.sk-tabs .ph-chip{font-family:inherit;cursor:pointer;font-size:.88rem;padding:8px 15px}
.sk-steps{margin:0;padding-left:22px}
.sk-steps li{font-size:.92rem;color:#334155;line-height:1.95}
.sk-steps a{color:#2563eb;font-weight:600}
.sk-steps code,.sk-muted code{background:#eef4fb;color:#1f3357;padding:1px 6px;border-radius:5px;font-size:.82rem}
.sk-cmd{margin-top:10px;padding:14px 16px}
.sk-cmd pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;word-break:break-all}
.sk-muted{font-size:.84rem;color:#64748b;line-height:1.7;margin:10px 0 0}
.sk-tip{margin-top:12px;font-size:.86rem;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:10px 14px;line-height:1.7}

/* หมายเหตุ / เงื่อนไขที่ AI ใช้เรียก */
.sk-note{margin-top:16px;background:#fffbeb;border:1px solid #fde68a;border-radius:14px;padding:13px 16px}
.sk-note b{display:block;color:#92400e;font-size:.9rem;margin-bottom:4px}
.sk-note div{font-size:.88rem;color:#78350f;line-height:1.7}
.sk-trigger{margin-top:16px;background:#f7fbff;border:1px solid #e6f0fb;border-radius:14px;padding:13px 16px}
.sk-trigger b{display:flex;align-items:center;gap:8px;color:#0f2356;font-size:.9rem;margin-bottom:5px}
.sk-trigger b i{color:#2563eb}
.sk-trigger p{margin:0;font-size:.86rem;color:#64748b;line-height:1.75}

/* แผงข้างใต้แชร์: ไฟล์ในแพ็กเกจ + ประวัติเวอร์ชัน (ใช้ .ph-panel) */
.sk-side-panel{margin-top:14px}
.sk-count{margin-left:auto;font-size:.76rem;font-weight:800;background:#eaf2fe;color:#2563eb;padding:3px 9px;border-radius:999px}
.sk-files{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.sk-files li{display:flex;gap:10px;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #e9f1fb;font-size:.8rem}
.sk-files li span:first-child{color:#334155;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sk-files li span:last-child{color:#94a3b8;flex:none}
.sk-versions{list-style:none;margin:0;padding:0}
.sk-versions li{padding:9px 0;border-bottom:1px dashed #e9f1fb}
.sk-versions li:last-child{border-bottom:0}
.sk-v-head{display:flex;justify-content:space-between;align-items:center;font-size:.86rem}
.sk-v-head b{color:#2563eb}
.sk-v-head span{color:#94a3b8;font-size:.76rem}
.sk-versions p{font-size:.82rem;color:#64748b;margin:4px 0 5px;line-height:1.6}
.sk-versions a{font-size:.8rem;color:#2563eb;text-decoration:none;font-weight:600}
.sk-versions a:hover{text-decoration:underline}

/* กล่อง "Skill ต่างจาก Prompt" ท้ายหน้าคลัง */
.sk-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.sk-compare > div{background:#f7fbff;border:1px solid #e6f0fb;border-radius:14px;padding:13px 16px}
.sk-compare b{display:flex;align-items:center;gap:8px;color:#0f2356;font-size:.92rem;margin-bottom:5px}
.sk-compare b i{color:#2563eb}
.sk-compare p{margin:0;font-size:.86rem;color:#64748b;line-height:1.7}