.shell main > footer { position:relative; }
.working-overlay {
  position:absolute;
  inset:0;
  z-index: 45;
  display:grid;
  place-items:center;
  padding:8px max(24px,calc((100% - 800px)/2));
  background:#f5f5f5e8;
  backdrop-filter:blur(2px);
}
.working-overlay[hidden] { display:none; }
.working-dog {
  display: grid;
  grid-template-columns: 72px minmax(145px,1fr);
  align-items: center;
  gap: 12px;
  width: min(310px,calc(100vw - 32px));
  padding: 7px;
  border: 1px solid #c7d8eb;
  border-radius: 14px;
  color: #26384d;
  background: #fffffff2;
  box-shadow: 0 14px 42px #173a6238;
  font-family: "Segoe UI Variable","Segoe UI",sans-serif;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(8px);
  animation: workingDogIn .2s ease-out;
}
.working-dog:hover { border-color:#1683d8; box-shadow:0 16px 46px #173a6248; transform:translateY(-2px); }
.working-dog:focus-visible { outline:3px solid #1683d83d; outline-offset:2px; }
.working-dog img { display:block; width:72px; height:72px; border-radius:8px; object-fit:cover; }
.working-dog span { display:flex; flex-direction:column; gap:6px; min-width:0; }
.working-dog strong { color:#075da8; font-size:15px; font-weight:700; letter-spacing:-.02em; }
.working-dog small { color:#607086; font-size:10px; line-height:1.55; }
.working-dog.stopping { opacity:.78; cursor:wait; }
.working-dog.stopping strong { color:#a15c00; }
@keyframes workingDogIn { from { opacity:0; transform:translateY(12px) scale(.97); } }

@media(max-width:760px) {
  .working-overlay { inset:0; padding:7px 16px; }
  .working-dog {
    grid-template-columns:64px minmax(120px,1fr);
    width:min(270px,calc(100vw - 24px));
    gap:8px;
    padding:6px;
  }
  .working-dog img { width:64px; height:64px; }
  .working-dog strong { font-size:13px; }
  .working-dog small { font-size:9px; }
}

@media(prefers-reduced-motion:reduce) {
  .working-dog { animation:none; transition:none; }
}