/* A shared panel: in the reserved scouting column on desktop, inside the shop on mobile. */
#sentUnitsDock[hidden], #sentUnitsPanel[hidden], #sentUnitsContent[hidden],
#sentUnitsPagination[hidden], #sentUnitsEmpty[hidden], [data-mobile-shop="sent"][hidden] { display: none !important; }

#sentUnitsPanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 7px;
  color: #eef6fa;
  border: 1px solid #ccb77d80;
  border-radius: 9px;
  background: #0c2033df;
  font: 12px/1.2 Inter, system-ui, sans-serif;
  contain: layout style;
}
.sent-units-heading { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 28px; }
#sentUnitsTitle { flex: 1; font-size: 12px; color: #f1ddb0; }
#sentUnitsCount, .sent-units-tab-count { padding: 2px 5px; border-radius: 4px; background: #6ee7d52b; color: #a9fff0; font-size: 10px; font-variant-numeric: tabular-nums; }
#sentUnitsPanel button { cursor: pointer; color: inherit; font: inherit; }
#sentUnitsToggle { width: 28px; height: 28px; padding: 0; border: 1px solid #a7bac85c; border-radius: 5px; background: #05111d99; font-size: 18px !important; }
#sentUnitsContent { display: flex; flex-direction: column; min-height: 0; }
#sentUnitsSort { flex: 0 0 auto; margin: 3px 0 6px; color: #a5bdc9; font-size: 10px; }
#sentUnitsEmpty { margin: 6px 0; color: #a5bdc9; line-height: 1.5; }
#sentUnitsList { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; }
#sentUnitsPanel .sent-unit-row { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 40px; padding: 3px; text-align: left; border: 1px solid #8fafbf29; border-left: 2px solid #70dfc8; border-radius: 5px; background: #0615238c; }
#sentUnitsPanel .sent-unit-row:hover { background: #204154; }
#sentUnitsPanel .sent-unit-row[aria-pressed="true"] { border-color: #ffe197; background: #65532966; box-shadow: inset 2px 0 #ffe197; }
#sentUnitsPanel button:focus-visible { outline: 2px solid #fff1b2; outline-offset: -2px; }
.sent-unit-portrait { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 32px; overflow: hidden; }
#sentUnitsPanel .choice-icon { width: 30px; height: 32px; min-width: 0; margin: 0; padding: 0; border: 0; background-color: transparent; box-shadow: none; }
#sentUnitsPanel .choice-icon img { width: 100%; height: 100%; object-fit: contain; }
.sent-unit-info { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.sent-unit-top { display: flex; gap: 4px; align-items: center; min-width: 0; }
.sent-unit-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.sent-unit-stack { font-size: 9px; color: #f1ddb0; }
.sent-unit-board { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a7c1d2; font-size: 9px; }
.sent-unit-health { display: flex; align-items: center; gap: 5px; }
.sent-unit-hp-track { flex: 1; height: 4px; min-width: 16px; overflow: hidden; border-radius: 2px; background: #04101c; }
.sent-unit-hp-fill { display: block; width: 100%; height: 100%; transform-origin: left; background: #76e5c6; }
[data-health="mid"] .sent-unit-hp-fill { background: #ffd078; }
[data-health="low"] .sent-unit-hp-fill { background: #ff7b8e; }
.sent-unit-hp-text { color: #e3edf2; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#sentUnitsPagination { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; }
#sentUnitsPagination button { width: 32px; height: 28px; padding: 0; border: 1px solid #8fafbf50; border-radius: 5px; background: #112e43; font-size: 20px; }
#sentUnitsPagination button:disabled { opacity: .3; cursor: default; }
#sentUnitsPage { color: #c0d1dc; font-size: 10px; font-variant-numeric: tabular-nums; }

body.match-active:not(.mobile-ui) #sentUnitsDock {
  position: fixed; z-index: 18; top: var(--desktop-minimap-top, 104px); right: 10px;
  bottom: calc(var(--desktop-shop-height, 240px) + 10px); width: var(--desktop-scout-width, 210px);
  display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; scrollbar-width: thin;
}
body.match-active:not(.mobile-ui) #sentUnitsDock > #sentUnitsPanel { flex: 0 1 auto; min-height: 180px; order: 1; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #sentUnitsPanel:has(#sentUnitsContent[hidden]) { min-height: 44px; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #minimapPanel,
body.match-active:not(.mobile-ui) #sentUnitsDock > #roundRecapPanel,
body.match-active:not(.mobile-ui) #sentUnitsDock > #mapEffectToast,
body.match-active:not(.mobile-ui) #sentUnitsDock > #chatPanel {
  position: static; flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; margin: 0; max-height: none; transform: none;
}
body.match-active:not(.mobile-ui) #sentUnitsDock > #minimapPanel { order: 0; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #roundRecapPanel { order: 2; box-sizing: border-box; max-height: min(300px, 40vh); padding: 7px; overflow: auto; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #roundRecapPanel .round-recap-head { position: sticky; top: -7px; z-index: 1; margin: -7px -7px 0; padding: 7px; background: #0c2033; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 4px; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #roundRecapPanel .round-recap-close { width: 28px; height: 28px; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #mapEffectToast { order: 3; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #chatPanel { order: 4; padding: 7px; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #chatPanel .panel-title { flex-wrap: wrap; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #chatPanel .chat-form { display: flex; min-width: 0; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #chatPanel .chat-form input { width: 0; flex: 1; min-width: 0; }
body.match-active:not(.mobile-ui) #sentUnitsDock > #chatPanel .chat-form button { flex: 0 0 auto; width: auto; min-width: 0; padding-inline: 7px; }
body.match-active:not(.mobile-ui):not(.chat-panel-open) #sentUnitsDock > #chatPanel,
body.match-active:not(.mobile-ui) #sentUnitsDock > #chatPanel.is-collapsed { display: none; }
body.match-active:not(.mobile-ui) #sentUnitsList { max-height: 428px; }

body.mobile-ui #sentUnitsToggle { display: none; }
body.mobile-ui #sentUnitsPanel .sent-unit-row { min-height: 44px; }
body.mobile-ui #sentUnitsPanel { display: none; }
body.mobile-ui[data-mobile-panel="sent"] #sentUnitsPanel:not([hidden]) { display: flex !important; }
body.mobile-battle-layout.mobile-game-v2.mobile-landscape.mobile-ui.match-active #mobileShopTabs:not([hidden]):has([data-mobile-shop="sent"]:not([hidden])) { grid-template-columns: 1fr 1fr 1fr !important; }
body.mobile-battle-layout.mobile-game-v2.mobile-landscape.mobile-ui.match-active #mobileShopTabs > button { gap: 3px; font-size: 10px; }
body.mobile-battle-layout.mobile-game-v2.mobile-landscape.mobile-ui.match-active[data-mobile-panel="sent"] > .shell > .sidebar { grid-template-rows: var(--mb-tab-height) minmax(0, 1fr) !important; }
body.mobile-battle-layout.mobile-game-v2.mobile-landscape.mobile-ui.match-active[data-mobile-panel="sent"] > .shell > .sidebar > #sentUnitsPanel {
  grid-row: 2 !important; display: flex !important; overflow: hidden !important; padding: 4px 1px !important;
}
body.mobile-battle-layout.mobile-game-v2.mobile-landscape.mobile-ui.match-active[data-mobile-panel="sent"] #mobileSheetHeader,
body.mobile-battle-layout.mobile-game-v2.mobile-landscape.mobile-ui.match-active[data-mobile-panel="sent"] #mobileShopBenchHost,
body.mobile-battle-layout.mobile-game-v2.mobile-landscape.mobile-ui.match-active[data-mobile-panel="sent"] #mobilePlacementToolbar { display: none !important; }
body.mobile-battle-layout #sentUnitsPanel { background: transparent; border: 0; }
body.mobile-battle-layout #sentUnitsContent { flex: 1; }
body.mobile-battle-layout #sentUnitsTitle { font-size: 11px; }
body.mobile-battle-layout #sentUnitsPagination { margin-top: auto; padding-top: 4px; }
body.mobile-battle-layout #sentUnitsPagination button { height: 32px; min-height: 32px; width: 40px; }
@media (max-height: 350px) {
  /* Suivi + its count already identify this panel in the tab strip. */
  body.mobile-battle-layout #sentUnitsPanel .sent-units-heading,
  body.mobile-battle-layout #sentUnitsSort { display: none; }
  body.mobile-battle-layout #sentUnitsPanel .sent-unit-row { height: 44px; min-height: 44px; }
  body.mobile-battle-layout .sent-unit-name { line-height: 11px; }
  body.mobile-battle-layout .sent-unit-board,
  body.mobile-battle-layout .sent-unit-health { line-height: 10px; }
}
@media (max-width: 680px) {
  body.mobile-battle-layout #mobileShopTabs .mobile-control-icon { display: none; }
  body.mobile-battle-layout #sentUnitsPanel .sent-unit-row { gap: 4px; }
}