/* unit-hud: janela redimensionável + sidebar dock */
.unit-hud{
  box-sizing:border-box;
  max-height:var(--vvh,100dvh);
}
.unit-hud.unit-hud-docked{
  top:var(--vv-top, 0px);
  bottom:auto;
  height:auto;
  max-height:var(--vvh,100dvh);
  max-width:min(62vw, var(--uh-max-w, 720px));
  min-width:var(--uh-min-w, 300px);
  width:var(--uh-w,340px);
  gap:0;
  z-index:35; /* acima da toolbar (30) para sobrepor tb-dock-switch */
  overflow:visible; /* grip centralizado no limite da borda */
  display:flex;
  flex-direction:column;
  transition:width .15s ease;
}
.unit-hud.unit-hud-docked.is-resizing{
  transition:none !important;
}
.unit-hud.unit-hud-float{
  overflow:visible;
  width:var(--uh-w,340px);
  height:min(72vh,620px);
  max-width:min(var(--uh-max-w, 720px),calc(100vw - 16px));
  max-height:min(calc(var(--vvh,100dvh) - 16px),calc(100vh - 16px));
  min-width:var(--uh-min-w, 300px);
  min-height:min(320px,calc(var(--vvh,100dvh) - 32px));
  display:flex;
  flex-direction:column;
}
/* Sidebar em aba: acima da toolbar docked (rail). Se a toolbar também for aba/float, não força. */
body:not([data-toolbar-pos="float"]) .unit-hud.unit-hud-float,
body:not([data-toolbar-pos="float"]) .unit-hud.unit-hud-docked:has(.unit-collapsed){
  z-index:35;
}
.unit-hud.unit-hud-float.is-resizing{
  transition:none !important;
}
.unit-hud.unit-hud-float .unit-card,
.unit-hud.unit-hud-float .digivice-card{
  flex:1;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:visible;
}
.unit-hud.unit-hud-float .unit-body,
.unit-hud.unit-hud-float .digivice-body{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.unit-hud.unit-hud-dock-left{
  left:0;
  right:auto;
  top:0;
  bottom:0;
}
.unit-hud.unit-hud-dock-right{
  left:auto;
  right:0;
}

/* —— Reage à posição da toolbar (data-toolbar-pos) —— */
/* Usa --bar-h (largura/altura real da rail), sem a folga de --bar-space */
body[data-toolbar-pos="right"] .unit-hud.unit-hud-dock-left{
  left:var(--vv-left, 0px);
  right:auto;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh,100dvh);
}
body[data-toolbar-pos="right"] .unit-hud.unit-hud-dock-right{
  left:auto;
  right:var(--bar-h, var(--tb-thickness, 76px));
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh,100dvh);
  max-width:min(62vw, calc(100vw - var(--bar-h, 76px)));
}

/* Toolbar na esquerda → HUD left fica colado na rail */
body[data-toolbar-pos="left"] .unit-hud.unit-hud-dock-left{
  left:calc(var(--vv-left, 0px) + var(--bar-h, var(--tb-thickness, 76px)));
  right:auto;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh,100dvh);
  max-width:min(62vw, calc(100vw - var(--bar-h, 76px)));
}
body[data-toolbar-pos="left"] .unit-hud.unit-hud-dock-right{
  left:auto;
  right:0;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh,100dvh);
}

/* Toolbar no topo/rodapé: sidebar altura total; toolbar encolhe via --hud-* */
body[data-toolbar-pos="top"] .unit-hud.unit-hud-dock-left,
body:not([data-toolbar-pos]) .unit-hud.unit-hud-dock-left{
  left:var(--vv-left, 0px);
  right:auto;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh, 100dvh);
}
body[data-toolbar-pos="top"] .unit-hud.unit-hud-dock-right,
body:not([data-toolbar-pos]) .unit-hud.unit-hud-dock-right{
  left:auto;
  right:0;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh, 100dvh);
}
body[data-toolbar-pos="bottom"] .unit-hud.unit-hud-dock-left{
  left:var(--vv-left, 0px);
  right:auto;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh, 100dvh);
}
body[data-toolbar-pos="bottom"] .unit-hud.unit-hud-dock-right{
  left:auto;
  right:0;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh, 100dvh);
}

/* Float: HUD full-bleed; toolbar aba não reserva faixa */
body[data-toolbar-pos="float"] .unit-hud.unit-hud-dock-left{
  left:var(--vv-left, 0px);
  right:auto;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh,100dvh);
}
body[data-toolbar-pos="float"] .unit-hud.unit-hud-dock-right{
  left:auto;
  right:0;
  top:var(--vv-top, 0px);
  bottom:auto;
  max-height:var(--vvh,100dvh);
}
.unit-hud-docked .unit-card,
.unit-hud-docked .digivice-card{
  position:relative;
  flex:1;
  height:100%;
  min-height:0;
  border-radius:0;
  display:flex;
  flex-direction:column;
  overflow:visible;
  box-shadow:none;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-top:0;
  border-bottom:0;
}
.unit-hud-dock-left .unit-card{
  border-left:0;
}
.unit-hud-dock-right .unit-card{
  border-right:0;
}
.unit-hud-docked .unit-body,
.unit-hud-docked .digivice-body{
  flex:1;
  min-height:0;
  overflow:hidden;
}
.unit-hud-docked.unit-hud:has(.unit-collapsed),
.unit-hud.unit-hud-float:has(.unit-collapsed){
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
  gap:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  z-index:36 !important; /* acima da toolbar (30) — pode sobrepor a rail */
}

/* Chip colapsado: pode ficar sobre a toolbar (centro na espessura da rail) */
.unit-hud-docked.unit-hud:has(.unit-collapsed){
  top:max(4px, calc((var(--bar-h, 54px) - 52px) / 2));
  bottom:auto;
}
.unit-hud-dock-left:has(.unit-collapsed){left:16px;right:auto}
.unit-hud-dock-right:has(.unit-collapsed){right:16px;left:auto}

body[data-toolbar-pos="top"] .unit-hud.unit-hud-docked:has(.unit-collapsed),
body:not([data-toolbar-pos]) .unit-hud.unit-hud-docked:has(.unit-collapsed){
  top:max(4px, calc((var(--bar-h, 54px) - 52px) / 2)) !important;
  bottom:auto !important;
}
body[data-toolbar-pos="top"] .unit-hud.unit-hud-dock-left:has(.unit-collapsed),
body:not([data-toolbar-pos]) .unit-hud.unit-hud-dock-left:has(.unit-collapsed){
  left:16px !important;
  right:auto !important;
}
body[data-toolbar-pos="top"] .unit-hud.unit-hud-dock-right:has(.unit-collapsed),
body:not([data-toolbar-pos]) .unit-hud.unit-hud-dock-right:has(.unit-collapsed){
  right:16px !important;
  left:auto !important;
}

body[data-toolbar-pos="bottom"] .unit-hud.unit-hud-docked:has(.unit-collapsed){
  top:auto !important;
  bottom:max(4px, calc((var(--bar-h, 54px) - 52px) / 2)) !important;
}
body[data-toolbar-pos="bottom"] .unit-hud.unit-hud-dock-left:has(.unit-collapsed){
  left:16px !important;
  right:auto !important;
}
body[data-toolbar-pos="bottom"] .unit-hud.unit-hud-dock-right:has(.unit-collapsed){
  right:16px !important;
  left:auto !important;
}

body[data-toolbar-pos="left"] .unit-hud.unit-hud-docked:has(.unit-collapsed){
  top:16px !important;
  bottom:auto !important;
}
body[data-toolbar-pos="left"] .unit-hud.unit-hud-dock-left:has(.unit-collapsed){
  left:max(4px, calc((var(--bar-h, 76px) - 52px) / 2)) !important;
  right:auto !important;
}
body[data-toolbar-pos="left"] .unit-hud.unit-hud-dock-right:has(.unit-collapsed){
  right:16px !important;
  left:auto !important;
}

body[data-toolbar-pos="right"] .unit-hud.unit-hud-docked:has(.unit-collapsed){
  top:16px !important;
  bottom:auto !important;
}
body[data-toolbar-pos="right"] .unit-hud.unit-hud-dock-left:has(.unit-collapsed){
  left:16px !important;
  right:auto !important;
}
body[data-toolbar-pos="right"] .unit-hud.unit-hud-dock-right:has(.unit-collapsed){
  right:max(4px, calc((var(--bar-h, 76px) - 52px) / 2)) !important;
  left:auto !important;
}

body[data-toolbar-pos="float"] .unit-hud.unit-hud-docked:has(.unit-collapsed){
  top:14px !important;
  bottom:auto !important;
}
body[data-toolbar-pos="float"] .unit-hud.unit-hud-dock-left:has(.unit-collapsed){
  left:16px !important;
  right:auto !important;
}
body[data-toolbar-pos="float"] .unit-hud.unit-hud-dock-right:has(.unit-collapsed){
  right:16px !important;
  left:auto !important;
}

.unit-hud .unit-collapsed{
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  flex:0 0 auto;
  box-sizing:border-box;
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  overflow:hidden;
  pointer-events:auto;
}

.unit-dock-btn{
  position:absolute;
  top:8px;
  right:34px;
  z-index:3;
  width:22px;
  height:22px;
  padding:0;
  border-radius:6px;
  line-height:1;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  background:#ffffff0a;
  border:1px solid rgba(255,255,255,.1);
}
.unit-dock-btn:hover{
  color:var(--text);
  background:#ffffff17;
}
.unit-hud-docked .unit-dock-btn{
  color:var(--accent);
}

.unit-resize-handle{
  position:absolute;
  z-index:4;
  pointer-events:auto;
  touch-action:none;
  box-sizing:border-box;
}

/* Float: 8 alças (bordas + cantos) */
.unit-resize-handle.edge-n,
.unit-resize-handle.edge-s{
  left:10px;
  right:10px;
  height:8px;
  width:auto;
  cursor:ns-resize;
  background:transparent;
}
.unit-resize-handle.edge-n{top:0;bottom:auto}
.unit-resize-handle.edge-s{bottom:0;top:auto}

.unit-resize-handle.edge-e,
.unit-resize-handle.edge-w{
  top:10px;
  bottom:10px;
  width:8px;
  height:auto;
  cursor:ew-resize;
  background:transparent;
}
.unit-resize-handle.edge-e{right:0;left:auto}
.unit-resize-handle.edge-w{left:0;right:auto}

.unit-resize-handle.edge-ne,
.unit-resize-handle.edge-nw,
.unit-resize-handle.edge-se,
.unit-resize-handle.edge-sw{
  width:14px;
  height:14px;
  background:
    linear-gradient(135deg,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 62%,transparent 62%),
    linear-gradient(135deg,transparent 68%,rgba(255,255,255,.32) 68%,rgba(255,255,255,.32) 80%,transparent 80%);
  border-radius:2px;
  opacity:.85;
}
.unit-resize-handle.edge-se{right:2px;bottom:2px;cursor:nwse-resize;background:
  linear-gradient(135deg,transparent 50%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.22) 62%,transparent 62%),
  linear-gradient(135deg,transparent 68%,rgba(255,255,255,.35) 68%,rgba(255,255,255,.35) 80%,transparent 80%)}
.unit-resize-handle.edge-sw{left:2px;bottom:2px;cursor:nesw-resize;transform:scaleX(-1)}
.unit-resize-handle.edge-ne{right:2px;top:2px;cursor:nesw-resize;transform:scaleY(-1)}
.unit-resize-handle.edge-nw{left:2px;top:2px;cursor:nwse-resize;transform:scale(-1)}

.unit-resize-handle.dock-left,
.unit-resize-handle.dock-right{
  top:0;
  bottom:0;
  width:20px;
  height:auto;
  cursor:ew-resize;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:80;
  pointer-events:auto;
}
.unit-resize-handle.dock-left{
  right:0;
  left:auto;
  transform:translateX(50%);
}
.unit-resize-handle.dock-right{
  left:0;
  right:auto;
  transform:translateX(-50%);
}

/* Pseudo antigo: desligado — grip real no DOM (unit-width-grip) */
.unit-resize-handle.dock-left::before,
.unit-resize-handle.dock-right::before,
.unit-resize-handle.dock-left::after,
.unit-resize-handle.dock-right::after,
.unit-resize-handle.edge-e::before,
.unit-resize-handle.edge-e::after{
  content:none !important;
  display:none !important;
}

.unit-hud-float .unit-resize-handle.edge-e{
  width:20px;
  right:0;
  left:auto;
  transform:translateX(50%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:80;
}

/* Mobile dock tratado em responsive-ui.css (bottom sheet) */

.unit-hud.unit-hud-float{
  right:auto;
}

/* Cabeçalho de arraste alinhado aos botões (mesmo “float-head”) */
.unit-drag-bar{
  display:none;
}
.unit-hud-float .unit-drag-bar{
  display:block;
  position:relative;
  height:30px;
  margin:0;
  flex-shrink:0;
  cursor:grab;
  touch-action:none;
  background:#ffffff08;
  border-bottom:1px solid var(--border);
}
.unit-hud-float .unit-drag-bar::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  height:4px;
  transform:translate(-50%,-50%);
  border-radius:99px;
  background:rgba(255,255,255,.22);
  box-shadow:10px 0 0 rgba(255,255,255,.22),-10px 0 0 rgba(255,255,255,.22);
  pointer-events:none;
}
.unit-hud-float .unit-drag-bar:active{
  cursor:grabbing;
}

/* Botões no mesmo eixo vertical da barra de arraste */
.unit-hud-float .unit-dock-btn,
.unit-hud-float .unit-collapse-btn{
  top:4px;
  width:22px;
  height:22px;
}
.unit-hud-float .unit-dock-btn{
  right:34px;
}
.unit-hud-float .unit-collapse-btn{
  right:8px;
}

/* Nome não precisa reservar espaço dos botões — eles ficam na barra */
.unit-hud-float .unit-name-row{
  padding-right:0;
}
.unit-hud-float .unit-body{
  padding-top:10px;
}

.unit-hud-float .unit-card{
  cursor:grab;
}
.unit-hud-float .unit-card:active{
  cursor:grabbing;
}
.unit-hud-float .unit-card button,
.unit-hud-float .unit-card .party-ball,
.unit-hud-float .unit-card .unit-resize-handle,
.unit-hud-float .unit-card a,
.unit-hud-float .unit-card input{
  cursor:pointer;
}
.unit-hud-float .unit-resize-handle.edge-se{
  cursor:nwse-resize !important;
}
.unit-hud-float .unit-resize-handle.edge-sw{
  cursor:nesw-resize !important;
}
.unit-hud-float .unit-resize-handle.edge-ne{
  cursor:nesw-resize !important;
}
.unit-hud-float .unit-resize-handle.edge-nw{
  cursor:nwse-resize !important;
}
.unit-hud-float .unit-resize-handle.edge-e,
.unit-hud-float .unit-resize-handle.edge-w{
  cursor:ew-resize !important;
}
.unit-hud-float .unit-resize-handle.edge-n,
.unit-hud-float .unit-resize-handle.edge-s{
  cursor:ns-resize !important;
}

.unit-hud-docked .unit-drag-bar{
  display:flex;
  cursor:grab;
  touch-action:none;
}
.unit-hud-docked .unit-drag-bar:active{
  cursor:grabbing;
}
.unit-hud-docked .unit-card{
  cursor:default;
}
.unit-hud-docked .unit-dock-btn,
.unit-hud-docked .unit-collapse-btn{
  top:8px;
}
.unit-hud-docked .unit-name-row{
  padding-right:56px;
}

/* unit-actions base styles replaced by unit-hud-theme.css */