/* layout.css — app shell (sidebar / topbar / bottom nav) + modal + toast
   มือถือ: sidebar → drawer + bottom tab bar */

/* ══ SHELL ═════════════════════════════════════════════ */
#shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100dvh}

.sidebar{
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
  position:sticky;top:0;height:100dvh;
}
.brand{
  display:flex;align-items:center;gap:9px;padding:18px 18px 4px;
  font-weight:800;font-size:17px;letter-spacing:-.03em;
}
.brand .mark{
  width:24px;height:24px;border-radius:var(--rad-s);background:var(--red);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;
}
.brand .v{font-size:9px;color:var(--ink-3);font-weight:500;margin-left:2px;align-self:flex-start;margin-top:3px}

.ws{
  margin:12px 12px 8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--rad-s);display:flex;align-items:center;gap:9px;
  font-size:12.5px;cursor:pointer;
}
.ws:hover{background:var(--panel-2)}
.ws .av{
  width:22px;height:22px;border-radius:var(--rad-s);background:var(--red);
  color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0;
}
.ws .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws .cx{margin-left:auto;color:var(--ink-3);font-size:11px}

.newbtn{margin:4px 12px 12px}
.nav{padding:0 8px;flex:1;overflow-y:auto}
.nav-sec{font-size:10px;color:var(--ink-3);letter-spacing:.14em;margin:16px 12px 6px;font-weight:500}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:0 12px;height:var(--h-md);
  border-radius:var(--rad-s);color:var(--ink-2);font-weight:500;font-size:13.5px;
  transition:var(--t-fast);margin-bottom:2px;position:relative;
}
.nav-item:hover{background:var(--panel-2);color:var(--ink)}
.nav-item.on{background:var(--panel-2);color:var(--ink)}
.nav-item.on::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:2px;background:var(--red);border-radius:2px;
}
.nav-item.on .ic{color:var(--red)}
.nav-item .ic{width:17px;text-align:center;color:var(--ink-3);font-size:14px;flex-shrink:0}
.nav-item .tail{margin-left:auto}

.credit-card{margin:12px;padding:12px;border:1px solid var(--line);border-radius:var(--rad)}
.credit-card .top{display:flex;justify-content:space-between;align-items:center}
.credit-card .num{font-size:22px;font-weight:700;margin:6px 0 8px}
.cbar{height:5px;background:var(--panel-3);border-radius:2px;overflow:hidden;margin-bottom:10px}
.cbar i{display:block;height:100%;background:var(--red)}

/* ══ MAIN ══════════════════════════════════════════════ */
.main{min-width:0;display:flex;flex-direction:column;min-height:100dvh}

.topbar{
  height:var(--topbar-h);flex-shrink:0;display:flex;align-items:center;gap:12px;
  padding:0 var(--gut);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:var(--z-topbar);
  background:var(--panel);
}
.search{
  flex:1;max-width:400px;display:flex;align-items:center;gap:9px;
  height:var(--h-md);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad-s);padding:0 var(--s3);color:var(--ink-3);font-size:13.5px;
}
.tspacer{flex:1}
.userchip{
  display:flex;align-items:center;gap:8px;padding:4px 10px 4px 5px;
  border-radius:var(--rad-s);border:1px solid var(--line);cursor:pointer;
}
.userchip:hover{background:var(--panel-2)}
.avatar{
  width:30px;height:30px;border-radius:var(--rad-s);background:var(--red);
  display:grid;place-items:center;font-weight:700;font-size:11px;color:#fff;flex-shrink:0;
}

.content{flex:1;padding:var(--s5) var(--gut) var(--s8)}

/* ⚠️ .page-head ย้ายไป base.css แล้ว
   billing/upgrade.php + billing/checkout.php ใช้ .page-head และถูกเรนเดอร์ด้วย
   layout `embed` ตอนเปิดใน iframe จาก editor — ซึ่งไม่โหลด layout.css
   → หัวข้อหน้าจ่ายเงินยุบทั้งบล็อกในเส้นทางที่เป็นทางเข้าหลัก */

.shead{position:relative;margin-bottom:var(--s5);padding-top:var(--s1);
  /* ghost word เป็น absolute + nowrap → ล้นกรอบได้ ตัดตรงนี้แทนที่จะไปหนีบที่ body
     ⚠️ ใช้ clip ไม่ใช่ hidden — clip ไม่สร้าง scroll container จึงไม่พัง position:sticky */
  overflow-x:clip}
.shead .ghost{top:-6px;right:0;font-size:clamp(44px,5.2vw,76px);opacity:.7}
.shead .klabel,.shead h1,.shead p{position:relative;z-index:1}
.shead h1{font-size:clamp(24px,2.1vw,30px);margin-top:var(--s1)}
.shead p{margin:var(--s1) 0 0;color:var(--ink-2);font-size:14px;max-width:620px}
.shead .act{position:absolute;right:0;bottom:0;z-index:1;display:flex;gap:10px}

/* layout 2 คอลัมน์ (main + rail ขวา) */
.layout{display:grid;grid-template-columns:1fr minmax(300px,340px);gap:var(--s5);align-items:start}
.rail{display:grid;gap:var(--s4);position:sticky;top:calc(var(--topbar-h) + var(--s4))}
@media (max-width:1320px){
  .layout{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr 1fr;position:static}
}
@media (max-width:800px){ .rail{grid-template-columns:1fr} }

.rowhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;gap:12px}
.rowhead .klabel{color:var(--ink)}
.rowhead a{font-size:12px;color:var(--ink-3);cursor:pointer}
.rowhead a:hover{color:var(--red)}

.toolbar{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}

/* ── แท็บกรองในแถบเครื่องมือ ─────────────────────
   เป็น <a> ไม่ใช่ปุ่ม JS → แชร์ลิงก์ได้ กดปุ่มย้อนกลับได้ และทำงานแม้ JS พัง */
.tb-tabs{
  display:flex;flex-wrap:wrap;gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--rad-s);
  background:var(--panel-2);
}
.tb-tab{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 12px;
  border-radius:4px;
  font-size:12.5px;font-weight:500;color:var(--ink-2);
  white-space:nowrap;
}
.tb-tab:hover{background:var(--panel);color:var(--ink)}
.tb-tab.on{background:var(--red);color:#fff}
/* ตัวเลขในแท็บที่ถูกเลือก — ขาวโปร่งบนแดง ยังอ่านออกชัด */
.tb-n{
  font-size:11px;font-weight:600;
  padding:1px 6px;border-radius:999px;
  background:var(--panel-3);color:var(--ink-3);
}
.tb-tab.on .tb-n{background:rgba(255,255,255,.22);color:#fff}
/* ดันตัวนับ ITEMS ไปชิดขวาสุดของแถบ */
.tb-meta{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:.06em}

/* ══ หน้าตั้งค่าบัญชี ═══════════════════════════════
   ⚠️ เดิมเป็นกล่องเดียวกว้าง 620px มี 2 ช่อง + toggle เดียว ดูโล่งมาก
      และผู้ใช้ต้องไปหน้าอื่นเพื่อดูแพ็กเกจ/ประวัติการจ่าย */
.set-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--s5);
  align-items:start;
}
.set-main,.set-side{min-width:0;display:flex;flex-direction:column;gap:var(--s4)}
.set-box{padding:20px 22px}
.set-box-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:14px;
}
.set-box-head .klabel{margin:0}
.set-more{font-size:12px;font-weight:500;color:var(--ink-2)}
.set-more:hover{color:var(--red)}

/* ── หัวโปรไฟล์ ─────────────────────────────────── */
.set-profile{
  display:flex;align-items:center;gap:13px;
  padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.set-avatar{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--red);color:#fff;
  font-size:19px;font-weight:700;
  object-fit:cover;   /* มีผลเมื่อเป็น <img> */
  overflow:hidden;
}
.set-profile-txt{min-width:0}
.set-profile-name{
  font-size:15px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.set-profile-sub{
  margin-top:2px;font-size:12.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.set-row-t{font-weight:600;font-size:13.5px;color:var(--ink)}

/* ── หลอดโควตา ─────────────────────────────────── */
.set-quota{margin-bottom:16px}
.set-quota-top{
  display:flex;justify-content:space-between;gap:10px;
  margin-bottom:7px;font-size:12.5px;color:var(--ink-2);
}
.set-quota-left{margin-top:7px;font-size:12px;color:var(--ink-3)}
.set-quota-txt{margin:0 0 14px;font-size:13px;line-height:1.65;color:var(--ink-2)}

/* ── ประวัติการจ่ายแบบย่อ ────────────────────────── */
.set-pays{list-style:none;margin:0;padding:0}
.set-pays li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.set-pays li:last-child{border-bottom:none}
.set-pay-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.set-pay-l b{font-size:13.5px;color:var(--ink)}

@media (max-width:1000px){
  .set-layout{grid-template-columns:1fr}
  .set-side{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:var(--s4);
  }
}

/* หมายเหตุท้ายรายการ (เช่น "แสดง 60 รายการล่าสุด") */
.list-note{
  margin:var(--s4) 0 0;
  text-align:center;
  font-size:12px;color:var(--ink-3);
}

/* รูปปกโปรเจกต์ — เดิมต้องใส่ inline style ทุกจุดที่ใช้ */
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:600px){
  /* แท็บล้นจอ → เลื่อนแนวนอนในกล่องตัวเอง ❌ ห้ามให้ body เลื่อน */
  .tb-tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .tb-tabs::-webkit-scrollbar{display:none}
  .tb-meta{margin-left:0}
}

/* กริดการ์ด */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s4)}
.clipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}

/* stat
   ⚠️ เดิม hardcode repeat(3,1fr) ซึ่งพังทันทีที่หน้าไหนใส่ 4 ใบ
      (admin/queue มี 4 → ได้ 3+1 ตกบรรทัด และเส้นคั่นซ้ายวาดผิดตำแหน่งบนแถวที่สอง)
      CLAUDE.md ระบุให้ใช้ auto-fit แทนการ hardcode จำนวนคอลัมน์

   เส้นคั่นทำด้วย gap + สีพื้น ไม่ใช่ border ราย item → ถูกเองทุกจำนวนใบและทุก breakpoint */
.statgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  background:var(--panel);
}
/* เส้นคั่นด้วย box-shadow — ช่องที่ auto-fit เหลือว่างจะไม่กลายเป็นแถบเทา
   และเส้นริมนอกถูก clip ด้วย overflow:hidden ของ .statgrid */
.stat{
  padding:var(--s5);background:var(--panel);min-width:0;
  box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line);
}
.stat .sl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stat .sn{font-size:32px;font-weight:700;margin-top:8px;letter-spacing:-.02em}
.stat.hot .sn{color:var(--red)}
.stat .sd{font-size:11.5px;color:var(--ink-2);margin-top:2px}

/* แบบเรียงลง (rail ข้างแดชบอร์ด) — คอลัมน์เดียว
   box-shadow ล่างของ .stat ทำเส้นคั่นแนวนอนให้เอง ส่วนเส้นขวาถูก clip ทิ้ง */
.statgrid.stack{grid-template-columns:1fr}
.statgrid.stack .stat{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5)}
.statgrid.stack .sn{font-size:26px;margin-top:0;min-width:56px}
.statgrid.stack .sd{margin-top:1px}

/* ══ mode card ═══════════════════════════════════════════
   ⚠️ แหล่งความจริงเดียวของ .modes/.mode อยู่ที่นี่
   เดิมนิยามซ้ำใน project.css ด้วย → .mode + .mode ได้ทั้ง border-left และ
   border-top พร้อมกัน = เส้นซ้อน และหน้า choose ถูกบังคับเป็น 2 คอลัมน์

   markup มี 2 ทรงที่ใช้จริง:
   · ทรงลิสต์ (default) — project/choose, admin/billing → <label class="mode"> + .mode-ic/.mode-body
   · ทรงเมนู 2 ช่อง     — dashboard/index          → <a class="mode"> + .mic/.mt/.md/.go
   แยกกันด้วย :has(.mic) เพราะ markup เป็นของ agent อื่น แก้ไม่ได้
   💡 ถ้าแก้ markup ได้ในอนาคต ควรใช้ modifier ตรง ๆ (.modes.is-nav) แทน :has */
.modes{
  display:grid;grid-template-columns:1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-bottom:var(--s5);
}
.mode{
  display:flex;gap:12px;align-items:flex-start;padding:var(--s4);
  transition:var(--t-fast);background:var(--panel);cursor:pointer;
}
.mode + .mode{border-top:1px solid var(--line)}
.mode:hover{background:var(--panel-2)}
.mode.on{background:var(--red-soft)}
.mode.lock{cursor:not-allowed}

/* ทรงเมนู 2 ช่องของหน้า dashboard — เส้นคั่นแนวตั้ง
   บนเบราว์เซอร์ที่ไม่รู้จัก :has() จะตกไปเป็นทรงลิสต์ ซึ่งก็คือหน้าตาเดียวกับ ≤1023px อยู่แล้ว */
@supports selector(:has(*)){
  @media (min-width:1024px){
    .modes:has(.mic){grid-template-columns:1fr 1fr}
    .modes:has(.mic) .mode{align-items:center;gap:var(--s4);padding:var(--s5)}
    .modes:has(.mic) .mode + .mode{border-top:none;border-left:1px solid var(--line)}
  }
}
.mode.lock .mic,.mode.lock .mt,.mode.lock .md{opacity:.5}
.mode .mic{
  width:44px;height:44px;border-radius:var(--rad-s);display:grid;place-items:center;
  font-size:20px;flex-shrink:0;border:1px solid var(--line);color:var(--red);
}
.mode:hover .mic{border-color:var(--red)}
.mode .mn{font-size:11px;color:var(--ink-3)}
.mode .mt{font-weight:700;font-size:15px;display:flex;align-items:center;gap:7px}
.mode .md{font-size:12px;color:var(--ink-2);margin-top:2px}
.mode .go{margin-left:auto;color:var(--ink-3)}

/* การ์ดโปรเจกต์ */
.proj{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;transition:var(--t-fast)}
.proj:hover{border-color:var(--ink)}
.thumb{aspect-ratio:16/10;background:var(--panel-3);position:relative;
  display:grid;place-items:center;border-bottom:1px solid var(--line)}
.thumb .em{font-size:32px;opacity:.5;color:var(--ink-3)}
.thumb .dur{position:absolute;bottom:8px;right:8px;background:var(--ink);color:var(--bg);
  font-size:10.5px;padding:2px 6px;border-radius:3px}
.thumb .ix{position:absolute;top:8px;left:8px;font-size:10px;color:var(--ink-3)}
.proj .body{padding:11px 13px}
.proj .body .t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj .body .m{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}

/* usage */
.usage-card{padding:18px 20px}
.ubar{height:8px;background:var(--panel-3);border-radius:2px;overflow:hidden;margin:12px 0 6px}
.ubar i{display:block;height:100%;background:var(--red)}
.u-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}

/* ── drawer + bottom nav (มือถือ) ─────────────────────── */
.drawer-backdrop{
  position:fixed;inset:0;background:var(--overlay);z-index:var(--z-drawer);
  opacity:0;pointer-events:none;transition:opacity var(--t-mid);
}
.drawer-backdrop.on{opacity:1;pointer-events:auto}

.bottomnav{display:none}

@media (max-width:1023px){
  #shell{grid-template-columns:1fr}

  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(284px,86vw);
    z-index:calc(var(--z-drawer) + 1);
    transform:translateX(-100%);transition:transform var(--t-mid) var(--ease);
    box-shadow:var(--shadow-lg);
  }
  .sidebar.on{transform:translateX(0)}

  .main{padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom))}
  .content{padding-bottom:var(--s6)}

  .bottomnav{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-topbar);
    background:var(--panel);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bn-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:var(--bottomnav-h);min-width:44px;
    font-size:10.5px;font-weight:500;color:var(--ink-3);
  }
  .bn-item i{font-size:18px}
  .bn-item.on{color:var(--red)}
  .bn-item.mid i{
    width:38px;height:38px;border-radius:var(--rad-s);background:var(--red);color:#fff;
    display:grid;place-items:center;font-size:18px;
  }
  .bn-item.mid{color:var(--ink-2)}

  .search{max-width:none}
  .shead .ghost{display:none}
  /* 💡 .statgrid ไม่ต้องบังคับ 1 คอลัมน์แล้ว — auto-fit + gap จัดการเองครบ */
  .modes{grid-template-columns:1fr}
  .mode + .mode{border-left:none;border-top:1px solid var(--line)}
  .shead .act{position:static;margin-top:var(--s3)}
}

@media (min-width:1024px){
  .menu-btn{display:none}
}

/* ══ MODAL + TOAST ═════════════════════════════════════
   ⚠️ ย้ายไป base.css แล้ว — ห้ามย้ายกลับมาที่นี่

   เหตุผล: layout.css ถูกโหลดแค่บาง layout (app · public · auth)
   แต่ modal.js/toast.js ถูกโหลด **ทุก** layout รวม editor และ embed
   → ของที่ JS สร้างขึ้นมาไม่มีสไตล์ กล่องยืนยันการเบิร์นวิดีโอกดแล้วไม่ขึ้นเลย

   base.css เป็นไฟล์เดียวที่ทุก layout โหลดครบ จึงเป็นที่ที่ถูกต้อง
   (.up-bar ก็ย้ายจาก project.css ไปด้วยเหตุผลเดียวกัน)
   ══════════════════════════════════════════════════════ */