/* ──────────────────────────────────────────────────────────────
   Class4-RO — AI Menu บนเว็บ

   หน้าตาต้องเหมือน AI Menu ของไคลเอนต์ PC ค่าทุกตัวคัดจาก
   client-ui/src/auto_attack_ui.h (struct Col + ImGuiStyle)
   ไม่ได้ไล่สีจากภาพหน้าจอ
   ────────────────────────────────────────────────────────────── */
#c4ai{
  --ac:#ffcb5c; --acL:#ffe9a9; --acD:#f0a52e;
  --bg:#e1f0fa; --bgL:#f1f8fd;
  --hdT:#e6f3fc; --hdB:#b3d8ef;
  --pn:#ffffff; --pnH:#f0f7fc;
  --ln:#acd1e8; --lnS:#d7e8f5;
  --bl:#3e86be; --blD:#1f5f93;
  --tx:#384a5e; --sb:#4a5e74; --dm:#94aabc;
  --on:#63c670; --off:#c7d6e0; --bad:#e97064;

  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,94vw);max-height:86vh;z-index:900;display:none;
  flex-direction:column;overflow:hidden;
  font-family:'IBM Plex Sans Thai',Tahoma,sans-serif;font-size:15px;
  color:var(--tx);background:var(--bg);
  border:1px solid var(--ln);border-radius:16px;
  box-shadow:0 24px 70px -20px #0b2a4499,0 0 0 1px #ffffff66 inset}
#c4ai.open{display:flex}

/* ── แถบหัว ─────────────────────────────────────────────────── */
#c4ai .hd{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;
  background:linear-gradient(180deg,var(--hdT),var(--hdB));
  border-bottom:1px solid var(--ln);cursor:move;user-select:none}
#c4ai .hd .nm{font-weight:600;color:var(--blD);font-size:16px}
/* โลโก้กลางแถบหัว ไฟล์เดียวกับที่ DLL ใช้ */
#c4ai .hd .logo{flex:1;height:44px;object-fit:contain;object-position:center;
  min-width:0;pointer-events:none}
#c4ai .hd button{width:28px;height:28px;display:grid;place-items:center;
  font:inherit;font-size:14px;line-height:1;cursor:pointer;
  color:var(--bl);background:#ffffffcc;border:1px solid var(--ln);border-radius:8px}
#c4ai .hd button:hover{background:#fff;color:var(--blD)}
#c4ai .hd button:active{background:var(--lnS)}

/* ── แถบเมนูหลัก 3 ปุ่มต่อแถว เหมือน PC ──────────────────────── */
#c4ai .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  padding:12px 14px 0}
#c4ai .tabs button{display:flex;align-items:center;gap:9px;
  padding:10px 12px;font:inherit;font-weight:600;font-size:14.5px;
  cursor:pointer;text-align:left;
  color:var(--bl);background:var(--pn);
  border:1px solid var(--ln);border-radius:10px;
  transition:background .12s linear,color .12s linear}
#c4ai .tabs button .d{width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--lnS);box-shadow:0 0 0 1px var(--ln)}
#c4ai .tabs button .ti{width:26px;height:26px;flex:none;object-fit:contain}
#c4ai .tabs button:hover{background:var(--bgL);color:var(--blD)}
#c4ai .tabs button.on{
  background:linear-gradient(180deg,var(--acL),var(--ac) 52%,var(--acD));
  border-color:var(--acD);color:#5a3f0c}
#c4ai .tabs button.on .d{background:#fff;box-shadow:0 0 0 1px #c98f22}

/* ── แถบย่อย ────────────────────────────────────────────────── */
#c4ai .subs{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 0}
#c4ai .subs button{padding:7px 16px;font:inherit;font-weight:600;font-size:14px;
  cursor:pointer;color:var(--bl);background:var(--pn);
  border:1px solid var(--ln);border-radius:8px}
#c4ai .subs button:hover{background:var(--bgL);color:var(--blD)}
#c4ai .subs button.on{
  background:linear-gradient(180deg,var(--acL),var(--ac) 52%,var(--acD));
  border-color:var(--acD);color:#5a3f0c}
#c4ai .subs:empty{display:none}

/* ── เนื้อหา ────────────────────────────────────────────────── */
#c4ai .bd{padding:12px 14px 14px;overflow:auto;min-height:150px}
#c4ai .bd::-webkit-scrollbar{width:9px}
#c4ai .bd::-webkit-scrollbar-thumb{background:var(--ln);border-radius:999px}

#c4ai .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){#c4ai .two{grid-template-columns:1fr}}

#c4ai .card{background:var(--pn);border:1px solid var(--ln);border-radius:12px;
  padding:13px 14px}
#c4ai .card>h3{display:flex;align-items:center;gap:8px;margin:0 0 3px;
  font-size:14.5px;font-weight:600;color:var(--blD)}
#c4ai .card>h3::before{content:'';width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--ac);box-shadow:0 0 0 1px #f0a52e66}
/* หน้าโหลดมีคลาส .sub ที่จัดกลางอยู่ด้วย ชื่อชนกัน ต้องสั่งทับให้ชัด */
#c4ai .card>p.sub{margin:0 0 11px;font-size:13px;color:var(--dm);text-align:left}

/* แถวรายการ: เลือกอยู่ = แถบอำพันด้านซ้าย เหมือนแถวของที่สวมอยู่บน PC */
#c4ai .row{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;margin-bottom:7px;font:inherit;text-align:left;cursor:pointer;
  background:var(--bgL);border:1px solid var(--lnS);border-radius:10px;
  color:var(--tx)}
#c4ai .row:last-child{margin-bottom:0}
#c4ai .row:hover{background:#fff;border-color:var(--ln)}
#c4ai .row.on{background:#fff;border-color:var(--acD);
  box-shadow:inset 3px 0 0 var(--ac)}
#c4ai .row .nm{flex:1;min-width:0}
#c4ai .row .nm b{display:block;font-weight:600;font-size:14px;color:var(--blD);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#c4ai .row .nm i{display:block;font-style:normal;font-size:12.5px;color:var(--dm)}
#c4ai .row .vl{font-weight:700;color:var(--acD);font-variant-numeric:tabular-nums}

#c4ai .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  color:var(--bl);background:var(--pn);
  border:1px solid var(--ln);border-radius:8px}
#c4ai .btn:hover{background:var(--bgL);color:var(--blD)}
#c4ai .btn:active{background:var(--lnS)}
#c4ai .btn.go{color:#5a3f0c;border-color:var(--acD);
  background:linear-gradient(180deg,var(--acL),var(--ac) 52%,var(--acD))}
#c4ai .btn.go:hover{filter:brightness(1.05)}
#c4ai .btn:disabled{cursor:default;color:var(--dm);border-color:var(--ln);
  background:#e8f1f8;filter:none}
#c4ai .btn.wide{width:100%}

#c4ai .mut{color:var(--dm);font-size:13.5px}
#c4ai .big{font-size:21px;font-weight:700;color:var(--blD);
  font-variant-numeric:tabular-nums}
#c4ai .arrow{color:var(--dm);margin:0 8px}
#c4ai .err{color:var(--bad);font-size:13.5px;font-weight:600}
#c4ai .ok{color:var(--on);font-size:13.5px;font-weight:600}

/* ── ปุ่มลอยเปิดเมนู ────────────────────────────────────────── */
/* ปุ่มเปิดเมนู อยู่มุมขวาบนใต้แถบไอคอนของเกม ตำแหน่งเดียวกับบน PC
   และใช้โลโก้เป็นปุ่มเหมือนกัน (DLL ใช้ ImageButton 42x42) */
#c4aiBtn{position:fixed;right:12px;top:96px;z-index:880;
  width:48px;height:48px;padding:3px;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg,#ffffffee,#e6f3fcee);
  border:1px solid #acd1e8;border-radius:12px;
  box-shadow:0 6px 16px -6px #0b2a4488}
#c4aiBtn img{width:100%;height:100%;object-fit:contain;pointer-events:none}
#c4aiBtn:hover{background:#fff;border-color:#f0a52e}
#c4aiBtn:active{transform:translateY(1px)}

/* ช่องกรอกและแถวปุ่มในแถบระบบอัตโนมัติ */
#c4ai .c4in{width:84px;flex:none;padding:7px 9px;font:inherit;font-size:13.5px;
  color:var(--tx);background:var(--pn);border:1px solid var(--ln);border-radius:8px}
#c4ai .c4in:focus{outline:none;border-color:var(--acD);box-shadow:0 0 0 2px #ffcb5c55}
#c4ai .c4form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
#c4ai .row .c4in{margin-left:auto}
#c4ai .row:has(.c4in){cursor:default}
#c4ai .row:has(.c4in):hover{background:var(--bgL);border-color:var(--lnS)}
#c4aiBtn.anchored{position:fixed}

/* [28/10/2026] ช่องเลือกสกิลในเมนู AI — ใช้คลาสเดียวกับช่องกรอก
   แต่ select ไม่รับความสูง/ฟอนต์จาก .c4in เท่า input จึงย้ำให้ตรงกัน */
.c4sel{min-width:150px;flex:1 1 150px;padding:4px 6px;cursor:pointer}
.c4sel option{background:#10243c;color:#dbe9f5}

/* [03/11] ช่องค้นหาหน้าสะสมการ์ด */
#c4ai .c4find{flex:1;width:auto;min-width:0}