/* Inventory / item selection panel (public/equipment-ui.js). Native mode: the body covers the whole D_dlg_inventory
   frame (263x643 ref px, scaled with the dialog) so the slots land on the decoded slot rects and the list on the bag
   grid. Flow mode (no ui.dat layout): the same parts stack inside the fallback window. */
.window-body.eq-host{overflow:hidden}
.eq-host.eq-native{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;z-index:3}
.eq-panel{position:relative;font:10px var(--hud-font, Arial, sans-serif);color:#e8e8e8;line-height:1.15}
.eq-panel.flow{display:flex;flex-direction:column;gap:6px;height:100%}
.eq-panel button{margin:0;font:10px var(--hud-font, Arial, sans-serif)}
.eq-panel :focus-visible{outline:1px solid #ffd76a;outline-offset:1px}

/* slots */
.eq-panel.flow .eq-doll{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.eq-panel .eq-slot{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:1px;padding:2px 3px;overflow:hidden;text-align:left;
  background:rgba(6,10,16,.35);border:1px solid rgba(160,170,190,.25);border-radius:2px;color:#ddd;cursor:pointer;box-sizing:border-box}
.eq-panel.flow .eq-slot{min-height:38px}
.eq-panel .eq-slot:hover{border-color:rgba(233,211,155,.6)}
.eq-slot-label{font-size:9px;color:#9aa3b0;white-space:nowrap}
.eq-slot-item{font-size:9px;color:#fff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.eq-slot.empty .eq-slot-item{display:none}
.eq-slot.equipped{background:rgba(40,52,30,.45);border-color:rgba(159,232,154,.45)}
.eq-slot.locked{background:rgba(30,30,30,.5);color:#999}
.eq-slot.locked .eq-slot-item{color:#aaa;font-style:italic}
.eq-slot.selected{border-color:#ffd76a;box-shadow:inset 0 0 0 1px rgba(255,215,106,.5)}
/* equipped item picture (item.icon, or a render of the loaded model: equipment-thumbs.js). The name stays in the button's
   aria-label/title; with a picture it is not drawn over it. No picture = the name, as before. */
.eq-panel.flow .eq-slot{position:relative}
.eq-slot-icon{position:absolute;left:2px;top:2px;right:2px;bottom:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;pointer-events:none}
.eq-slot.has-icon .eq-slot-item{display:none}
.eq-panel.native .eq-slot.has-icon .eq-slot-label{display:none}
.eq-panel.flow .eq-slot.has-icon .eq-slot-icon{bottom:12px;height:calc(100% - 14px)}
.eq-panel.flow .eq-slot.has-icon{min-height:56px}
.eq-panel.flow .eq-slot.has-icon .eq-slot-label{position:relative}

/* filters */
.eq-controls{display:flex;flex-direction:column;gap:3px;box-sizing:border-box}
.eq-row{display:flex;gap:3px;align-items:center;min-width:0}
.eq-panel select,.eq-panel input[type=search]{height:17px;font:10px var(--hud-font, Arial, sans-serif);background:rgba(0,0,0,.65);color:#fff;border:1px solid #556;padding:0 2px;box-sizing:border-box;min-width:0}
.eq-class{flex:0 1 96px;max-width:96px}
.eq-search{flex:1 1 60px}
.eq-chips{flex-wrap:wrap;gap:2px}
.eq-panel .eq-chip{padding:1px 4px;background:linear-gradient(#3a4049,#23272d);border:1px solid #6b7480;color:#ddd;cursor:pointer}
.eq-panel .eq-chip.active{background:linear-gradient(#5a6170,#353a44);border-color:#c9b27a;color:#fff}
.eq-check{display:flex;align-items:center;gap:2px;flex:0 0 auto;white-space:nowrap;color:#bbb}
.eq-check input{margin:0;width:11px;height:11px}

/* list (bag grid area) */
.eq-list{list-style:none;margin:0;padding:0;overflow:auto;box-sizing:border-box;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06)}
.eq-panel.flow .eq-list{flex:1 1 auto;min-height:120px}
.eq-item{border-bottom:1px solid rgba(255,255,255,.05)}
.eq-panel .eq-row-item{display:flex;gap:4px;align-items:center;width:100%;padding:2px 3px;text-align:left;background:transparent;border:0;color:#e8e8e8;cursor:pointer}
.eq-panel .eq-row-item:hover{background:rgba(255,255,255,.06)}
.eq-item.selected .eq-row-item{background:rgba(201,178,122,.18);box-shadow:inset 2px 0 0 #c9b27a}
.eq-icon{width:24px;height:24px;flex:0 0 24px;object-fit:contain}
.eq-item-text{display:flex;flex-direction:column;min-width:0}
.eq-item-name{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-item-meta{color:#9aa3b0;font-size:9px}
.eq-item-state{font-size:9px;color:#9fe89a}
.eq-item.unavailable .eq-item-name{color:#9a9a9a}
.eq-item.unavailable .eq-item-state{color:#ff9d7d}
.eq-item.equipped .eq-item-state{color:#ffd76a}
.eq-empty{display:flex;flex-direction:column;gap:3px;padding:8px 6px;color:#bbb;line-height:1.4}
.eq-empty strong{color:#e9d39b}

/* selected item + actions */
.eq-detail{display:flex;flex-direction:column;gap:1px;box-sizing:border-box;min-width:0}
.eq-detail-name{margin:0;font-weight:bold;color:#e9d39b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-detail-meta{margin:0;color:#aab;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-actions{display:flex;gap:3px;align-items:center}
.eq-panel .eq-actions button{padding:1px 5px;background:linear-gradient(#3a4049,#23272d);border:1px solid #6b7480;color:#fff;cursor:pointer}
.eq-panel .eq-actions button:disabled{opacity:.45;cursor:not-allowed}
.eq-upgrade{width:52px}
.eq-footer{margin-left:auto;color:#ffe14a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-panel.native .eq-footer{text-align:right;line-height:14px}
.eq-status{margin:0;min-height:11px;color:#ffcf6a;font-size:9px}
.eq-panel.native .eq-status{position:absolute;left:15px;right:15px;top:313px;height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* native frame bottom: name/facts above the frame's coin, buttons under it (positions set in equipment-ui.js) */
.eq-panel.native .eq-detail{gap:1px;z-index:1}
.eq-panel.native .eq-actions{z-index:2}
.eq-panel.native .eq-actions button{height:14px;line-height:12px;padding:0 6px}

/* Missing native layout: give the flow panel a bounded list and room for its controls. */
.inventory-window.fallback-frame .inv-equipment{display:flex;flex-direction:column;height:100%;min-height:0}
.inventory-window.fallback-frame .eq-panel.flow{height:auto;min-height:0;flex:1}

/* inventoryGrid=1 only: same catalog, compact cells, inferred 8x8/29px reference.
   Scroll stays inside the existing bag/list rect; Alz, actions and slots keep their decoded rects. */
.eq-viewbar{display:flex;align-items:center;gap:3px;min-height:20px;flex-shrink:0;box-sizing:border-box;overflow:hidden}
.eq-viewbar button{padding:1px 4px;color:#eee;background:#242b33;border:1px solid #667;cursor:pointer}
.eq-viewbar button[aria-pressed=true]{border-color:#dfc583;color:#ffe1a0}
.eq-viewbar button:disabled{opacity:.45;cursor:default}
.eq-page-label{flex:1;text-align:center;white-space:nowrap;font-size:9px}
.eq-list.eq-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:29px;align-content:start;padding:0;gap:0}
.eq-grid .eq-item{min-width:0;border:1px solid rgba(200,200,220,.15);overflow:hidden}
.eq-grid .eq-row-item{box-sizing:border-box;height:100%;padding:1px;position:relative;justify-content:center;overflow:hidden}
.eq-grid .eq-icon{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}
.eq-grid .eq-item-text{width:100%;font-size:8px;text-align:center;line-height:9px}
.eq-grid .eq-item-name{white-space:normal;overflow:hidden;max-height:26px;font-weight:normal;word-break:break-word}
.eq-grid .eq-item-meta,.eq-grid .eq-item-state{display:none}
.eq-grid .eq-row-item:has(.eq-icon) .eq-item-text{visibility:hidden}
.eq-grid .eq-item.selected .eq-row-item{box-shadow:inset 0 0 0 1px #ffd76a}
.eq-grid .eq-empty{grid-column:1 / -1}


/* itemTooltip=1 only. The floating layer belongs to document.body (outside transformed HUD/clipping). */
.eq-item-tooltip{position:fixed;z-index:10000;box-sizing:border-box;pointer-events:none;overflow:hidden;
  width:240px;color:#eee;background:rgba(8,10,16,.96);border:1px solid #8b846e;font:11px Arial,sans-serif;line-height:1.3}
.eq-item-tooltip[hidden]{display:none}
.eq-item-tooltip.has-native-frame{border:0;background:rgba(8,10,16,.96)}
.eq-tip-cap{display:none;position:absolute;left:0;right:0;pointer-events:none;background-repeat:no-repeat}
.eq-item-tooltip.has-native-frame .eq-tip-cap{display:block}
.eq-tip-top{top:0}.eq-tip-bottom{bottom:0}
.eq-tip-content{position:relative;padding:9px 10px;overflow-wrap:anywhere}
.eq-tip-name{display:block;color:#ffe0a2;margin-bottom:4px}
.eq-tip-state{margin-top:4px;color:#ddd}
/* 2011 item info (K_dlg_ITM_info): 16px rows (UITextbox.h:47), text box x10 w220, first row empty, centred name block,
   separators L_icn_ITM_info_line01..05 at row+8 across the 240px dialog (UIInfoDialog.cpp:723-795). Font as the HUD info rows. */
.eq-item-tooltip.native-2011 .eq-tip-content{padding:0 10px 7px;overflow-wrap:normal}
.eq-tip-line{position:relative;min-height:16px;line-height:16px;white-space:pre-wrap;font:11px var(--hud-font,Arial),sans-serif;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.eq-tip-line.align-1{text-align:center}
.eq-tip-extra{position:absolute;top:0;white-space:nowrap}
.eq-tip-sep{position:relative;height:16px}
.eq-tip-sep i{position:absolute;left:-10px;top:8px;width:240px;height:2px;background-repeat:no-repeat}
.eq-tip-sep:empty::after{content:'';position:absolute;left:-10px;right:-10px;top:8px;height:1px;background:#5c646a}