/* =====================================================================
   Inventory in the Settings sky frame (2026-09-29) - #inventory-window, built by the bundle (Sg / Tg).
   Banner title + painted close button like Settings, weight / ZEN / equip row, one category chip row,
   item grid + detail panel side by side (the detail keeps "ใช้ / สวมใส่" in reach), footer tools.
   Phones: a bigger window than Settings so cells are easy to tap; the grid and the detail scroll by themselves.
   ===================================================================== */
html body #hud#hud section#inventory-window.window {
  --window-scale: 0.85 !important; --win-boost: 1 !important;
  --nv-z: calc(var(--ui-zoom, 1) * var(--window-scale, 1));
  /* BAG-FIT-V2: the same size as the adventurer officer window (540 wide, x0.85 / x0.62 on phones).
     --u follows the window's full width like the frame art does; 100cqw is the width inside the padding,
     which put the close button and the header parts off the painted frame. */
  --nv-w: min(540px, calc((100vw - 16px) / var(--nv-z)));
  --k: calc(var(--nv-w) / 821);
  --u: var(--k) !important;
  container-type: inline-size !important;
  width: var(--nv-w) !important; max-width: none !important; min-width: 0 !important;
  height: min(calc(var(--nv-w) * 1.5), calc((100dvh - 24px) / var(--nv-z))) !important; max-height: none !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: center;
  column-gap: calc(var(--k) * 10); row-gap: calc(var(--k) * 10);
  padding: calc(var(--k) * 200) calc(var(--k) * 40) calc(var(--k) * 60) calc(var(--k) * 44) !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;
  color: #10294f !important; font-family: 'Noto Sans Thai', system-ui, sans-serif;
}
@media (max-height: 520px), (max-width: 640px) {
  html body #hud#hud section#inventory-window.window { --window-scale: 0.62 !important; }
}
html body #hud section#inventory-window.window::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; transform: none !important;
  z-index: -1 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  border-style: solid !important; border-width: calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) !important; border-color: transparent !important;
  border-image: url('/ui/settings/frame-sky.webp?v=1') 492 0 145 0 fill / calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) stretch !important;
  filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4)) !important; pointer-events: none !important;
}
html body #hud section#inventory-window.window::after { display: none !important; }

/* ---- header: the titlebar box goes away, its parts are placed in the frame */
html body #hud section#inventory-window .titlebar.bag-head { display: contents !important; }
html body #hud section#inventory-window .bag-head-icon { display: none !important; }
html body #hud section#inventory-window .bag-title {
  position: absolute !important; left: 0; right: 0; top: calc(var(--u) * 78); height: calc(var(--u) * 74);
  display: flex !important; align-items: center; justify-content: center; pointer-events: none; margin: 0 !important; padding: 0 !important;
}
/* BAG-DRAG-V1: the banner is the drag handle (the title bar box itself is display:contents, so it had nothing to grab);
   the bundle's window drag listens on .titlebar.bag-head and the title is inside it */
html body #hud section#inventory-window .bag-title {
  pointer-events: auto !important; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  top: calc(var(--u) * 24) !important; height: calc(var(--u) * 140) !important; left: calc(var(--u) * 120) !important; right: calc(var(--u) * 120) !important; z-index: 2;
}
html body #hud section#inventory-window.dragging .bag-title { cursor: grabbing; }
html body #hud section#inventory-window .bag-title strong { font-size: 0 !important; }
html body #hud section#inventory-window .bag-title strong::after {
  content: "กระเป๋า"; color: #fff; font: 700 calc(var(--u) * 46) / 1 'Cormorant Garamond', 'Noto Serif Thai', 'Noto Sans Thai', serif;
  text-shadow: -0.1em 0 #1b3a7a, 0.1em 0 #1b3a7a, 0 -0.08em #1b3a7a, 0 0.1em #1b3a7a, 0 0.15em 0.25em rgba(10, 30, 80, 0.6);
}
html body #hud section#inventory-window .bag-title small { display: none !important; }
html body #hud section#inventory-window .bag-head > button:not(.equipment-open) {
  position: absolute !important; left: calc(var(--u) * 754) !important; right: auto !important; top: calc(var(--u) * 75) !important;
  width: calc(var(--u) * 56) !important; height: calc(var(--u) * 56) !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important;
  background: none !important; border: 0 !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; z-index: 3;
}
html body #hud section#inventory-window .bag-head > button:not(.equipment-open):hover { background: rgba(255, 255, 255, 0.25) !important; }
html body #hud section#inventory-window .bag-pill {
  display: inline-flex !important; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 16) !important; margin: 0 !important;
  border-radius: calc(var(--u) * 26) !important; border: calc(var(--u) * 2) solid #dfb758 !important;
  background: linear-gradient(180deg, #1f4f94, #143a73) !important; color: #fff !important; font-size: calc(var(--u) * 22) !important; white-space: nowrap;
}
html body #hud section#inventory-window .bag-pill b { color: #ffe39a !important; font-size: inherit !important; font-weight: 700; }
html body #hud section#inventory-window .bag-pill svg, html body #hud section#inventory-window .bag-pill img { width: calc(var(--u) * 26) !important; height: calc(var(--u) * 26) !important; }
html body #hud section#inventory-window .bag-pill-silver { background: linear-gradient(180deg, #fffdf3, #fbeec2) !important; }
html body #hud section#inventory-window .bag-pill-silver b { color: #6b4b06 !important; }
html body #hud section#inventory-window #bag-weight { grid-column: 1 !important; grid-row: 1 !important; }
html body #hud section#inventory-window #bag-silver { grid-column: 2 !important; grid-row: 1 !important; }
html body #hud section#inventory-window .equipment-open {
  grid-column: 4 !important; grid-row: 1 !important; height: calc(var(--u) * 50) !important; padding: 0 calc(var(--u) * 22) !important; border-radius: calc(var(--u) * 12) !important;
  border: calc(var(--u) * 2) solid #9c7a36 !important; background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important;
  font: 700 calc(var(--u) * 22) / 1 'Noto Sans Thai', sans-serif !important; box-shadow: none !important; position: static !important;
}

/* ---- main: category chips, grid | detail */
html body #hud section#inventory-window .bag-main {
  grid-column: 1 / -1 !important; grid-row: 2 !important; align-self: stretch; min-height: 0; height: auto !important; margin: 0 !important; padding: 0 !important;
  display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas: "side side" "layout detail" !important; gap: calc(var(--u) * 12); background: none !important; border: 0 !important;
}
html body #hud section#inventory-window .bag-side {
  grid-area: side !important; display: flex !important; flex-direction: row !important; gap: calc(var(--u) * 8); overflow-x: auto; overflow-y: hidden;
  width: auto !important; height: auto !important; padding: calc(var(--u) * 4) !important; margin: 0 !important; border: 0 !important; background: none !important;
  scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x;
}
html body #hud section#inventory-window .bag-side::-webkit-scrollbar { display: none; }
html body #hud section#inventory-window .bag-side button {
  flex: none; display: inline-flex !important; align-items: center; gap: calc(var(--u) * 8); width: auto !important; min-height: 0 !important;
  height: calc(var(--u) * 52) !important; padding: 0 calc(var(--u) * 18) !important; margin: 0 !important; border-radius: calc(var(--u) * 26) !important;
  border: calc(var(--u) * 2) solid #b9d3ec !important; background: linear-gradient(180deg, #ffffff, #e3effb) !important; color: #1d4f9a !important; box-shadow: none !important;
}
html body #hud section#inventory-window .bag-side button svg { width: calc(var(--u) * 24) !important; height: calc(var(--u) * 24) !important; flex: none; }
html body #hud section#inventory-window .bag-side button span { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
html body #hud section#inventory-window .bag-side button b { display: none; }
html body #hud section#inventory-window .bag-side button small { display: block !important; font: 700 calc(var(--u) * 22) / 1.1 'Noto Sans Thai', sans-serif !important; color: inherit !important; }
html body #hud section#inventory-window .bag-side button[aria-pressed="true"], html body #hud section#inventory-window .bag-side button.active {
  background: linear-gradient(180deg, #4f93f2, #1f5fd0) !important; border-color: #174cb0 !important; color: #fff !important;
}

html body #hud section#inventory-window .bag-layout {
  grid-area: layout !important; min-height: 0; min-width: 0; display: flex !important; flex-direction: column; padding: 0 !important; margin: 0 !important;
  border: calc(var(--u) * 2) solid #b9d3ec !important; border-radius: calc(var(--u) * 16) !important; background: rgba(255, 255, 255, 0.72) !important; overflow: hidden;
}
html body #hud section#inventory-window .bag-layout > .bag-tabs { display: none !important; }
html body #hud section#inventory-window .bag-grid {
  flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain; touch-action: pan-y;
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 92), 1fr)) !important; grid-auto-rows: calc(var(--u) * 92);
  align-content: start; gap: calc(var(--u) * 8) !important; padding: calc(var(--u) * 10) !important; background: none !important;
}
html body #hud section#inventory-window:not([data-view="list"]) .bag-slot,
html body #hud section#inventory-window:not([data-view="list"]) .bag-empty {
  position: relative; width: auto !important; height: auto !important; min-width: 0; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important;
  border-radius: calc(var(--u) * 14) !important; border: calc(var(--u) * 2) solid #cfe0f2 !important; background: linear-gradient(180deg, #ffffff, #eef5fd) !important; box-shadow: none !important;
}
html body #hud section#inventory-window:not([data-view="list"]) .bag-slot { display: grid !important; place-items: center; cursor: pointer; }
html body #hud section#inventory-window:not([data-view="list"]) .bag-slot[hidden] { display: none !important; }
html body #hud section#inventory-window:not([data-view="list"]) .bag-slot img { width: calc(var(--u) * 62) !important; height: calc(var(--u) * 62) !important; object-fit: contain; image-rendering: pixelated; }
html body #hud section#inventory-window:not([data-view="list"]) .bag-slot .bag-name { display: none !important; }
html body #hud section#inventory-window:not([data-view="list"]) .bag-slot b {
  position: absolute !important; right: calc(var(--u) * 4) !important; bottom: calc(var(--u) * 3) !important; left: auto !important; top: auto !important;
  min-width: 0; padding: 0 calc(var(--u) * 6) !important; border-radius: calc(var(--u) * 8); background: rgba(16, 41, 79, 0.82) !important;
  color: #ffe39a !important; font: 800 calc(var(--u) * 19) / 1.35 system-ui, sans-serif !important; text-shadow: none !important;
}
html body #hud section#inventory-window .bag-slot:hover { border-color: #dfb758 !important; }
html body #hud section#inventory-window .bag-slot[aria-pressed="true"] { border-color: #dfb758 !important; background: linear-gradient(180deg, #fffdf2, #fbeec2) !important;
  box-shadow: 0 0 0 calc(var(--u) * 3) rgba(223, 183, 88, 0.45) !important; }
html body #hud section#inventory-window[data-view="list"] .bag-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto; }
html body #hud section#inventory-window[data-view="list"] .bag-slot { min-height: calc(var(--u) * 64); font-size: calc(var(--u) * 22) !important; }
html body #hud section#inventory-window[data-view="list"] .bag-slot img { width: calc(var(--u) * 48) !important; height: calc(var(--u) * 48) !important; }

/* detail: search on top, the card scrolls, the main button stays visible */
html body #hud section#inventory-window .bag-detail {
  grid-area: detail !important; min-height: 0; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: column; gap: calc(var(--u) * 10); background: none !important; border: 0 !important;
}
html body #hud section#inventory-window .bag-search { flex: none; display: flex !important; gap: calc(var(--u) * 8); margin: 0 !important; }
html body #hud section#inventory-window .bag-search label {
  flex: 1; display: flex !important; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 14) !important;
  border-radius: calc(var(--u) * 27) !important; border: calc(var(--u) * 2) solid #b9d3ec !important; background: #fff !important;
}
html body #hud section#inventory-window .bag-search label svg { width: calc(var(--u) * 24) !important; height: calc(var(--u) * 24) !important; flex: none; }
html body #hud section#inventory-window .bag-search input { flex: 1; min-width: 0; height: 100% !important; border: 0 !important; background: none !important; outline: none;
  font: calc(var(--u) * 22) 'Noto Sans Thai', sans-serif !important; color: #10294f !important; padding: 0 !important; user-select: text; -webkit-user-select: text; }
html body #hud section#inventory-window #bag-filter-reset { flex: none; width: calc(var(--u) * 54) !important; height: calc(var(--u) * 54) !important; padding: 0 !important;
  border-radius: 50% !important; border: calc(var(--u) * 2) solid #b9d3ec !important; background: #fff !important; color: #1d4f9a !important; }
html body #hud section#inventory-window #bag-filter-reset svg { width: 50% !important; height: 50% !important; }
html body #hud section#inventory-window .bag-card {
  flex: 1 1 auto; min-height: 0; overflow-y: auto !important; overscroll-behavior: contain; touch-action: pan-y; margin: 0 !important;
  padding: calc(var(--u) * 14) !important; border-radius: calc(var(--u) * 16) !important; border: calc(var(--u) * 2) solid #b9d3ec !important;
  background: linear-gradient(180deg, #ffffff, #eef6fe) !important; font-size: calc(var(--u) * 21) !important; color: #10294f !important;
}
html body #hud section#inventory-window .bag-card * { font-size: inherit; }
html body #hud section#inventory-window .bag-card-head { display: flex; gap: calc(var(--u) * 12); align-items: center; margin-bottom: calc(var(--u) * 8); }
html body #hud section#inventory-window .bag-card-head img { width: calc(var(--u) * 84) !important; height: calc(var(--u) * 84) !important; object-fit: contain; image-rendering: pixelated;
  border-radius: calc(var(--u) * 12); border: calc(var(--u) * 2) solid #dfb758; background: #fff; flex: none; }
html body #hud section#inventory-window #bag-detail-name { font-size: calc(var(--u) * 26) !important; font-weight: 800; color: #10294f !important; }
html body #hud section#inventory-window .bag-card-empty { display: grid; place-items: center; height: 100%; color: #5b7396; text-align: center; }
html body #hud section#inventory-window .bag-card-empty[hidden] { display: none !important; }
html body #hud section#inventory-window #bag-use {
  position: sticky; bottom: 0; z-index: 1; width: 100%; min-height: calc(var(--u) * 60) !important; margin: calc(var(--u) * 8) 0 !important;
  border-radius: calc(var(--u) * 14) !important; border: calc(var(--u) * 2) solid #9c7a36 !important;
  background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; font: 800 calc(var(--u) * 24) / 1 'Noto Sans Thai', sans-serif !important;
}
html body #hud section#inventory-window #bag-use:disabled { opacity: .55; }
html body #hud section#inventory-window .bag-actions button, html body #hud section#inventory-window #bag-split-row button {
  min-height: calc(var(--u) * 50) !important; border-radius: calc(var(--u) * 12) !important; font-size: calc(var(--u) * 21) !important; }

/* ---- footer */
html body #hud section#inventory-window .bag-footer {
  grid-column: 1 / -1 !important; grid-row: 3 !important; display: flex !important; align-items: center; gap: calc(var(--u) * 10); height: auto !important; margin: 0 !important;
  padding: calc(var(--u) * 6) calc(var(--u) * 10) !important; border-radius: calc(var(--u) * 14) !important; border: calc(var(--u) * 2) solid #b9d3ec !important;
  background: linear-gradient(180deg, #eaf4fd, #d6e9f9) !important; color: #10294f !important; font-size: calc(var(--u) * 21) !important;
}
html body #hud section#inventory-window .bag-footer button { height: calc(var(--u) * 50) !important; min-width: calc(var(--u) * 50) !important; font-size: calc(var(--u) * 21) !important; }
html body #hud section#inventory-window .bag-footer svg { width: calc(var(--u) * 24) !important; height: calc(var(--u) * 24) !important; }
html body #hud section#inventory-window #bag-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- phones: the same layout as on PC (the window has the same width now); a bit bigger cells */
@media (max-height: 520px), (max-width: 640px) {
  html body #hud section#inventory-window .bag-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 100), 1fr)) !important; grid-auto-rows: calc(var(--u) * 100); }
  html body #hud section#inventory-window #bag-quote, html body #hud section#inventory-window .bag-quote { display: none !important; }
}

/* closed = gone (the display:grid above must not keep an invisible window catching taps) */
html body #hud#hud section#inventory-window.window[hidden] { display: none !important; }