/* A phone: the coder's video floats in a corner while it is scrolled out of view (js/coder.js, "a phone: the video
   floats while coding"). The frame keeps its place in the page and only changes position; the box keeps its height
   so nothing below it jumps */
.mini-bar { display: none; }
.tbtn.float { display: none; }
@media screen and (max-width: 1080px) {
  .tbtn.float { display: inline-grid; }
  .video-box.docked .video-frame {
    position: fixed;
    left: var(--mini-x);
    top: var(--mini-y);
    z-index: 60;
    width: var(--mini-w);
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  .video-box.docked .mini-bar {
    position: fixed;
    left: var(--mini-x);
    top: calc(var(--mini-y) - 26px);
    z-index: 61;
    display: flex;
    align-items: center;
    width: var(--mini-w);
    height: 26px;
    border-radius: 8px 8px 0 0;
    background: rgba(11, 11, 12, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    touch-action: none;
  }
  .video-box.docked .video-frame { border-top-left-radius: 0; border-top-right-radius: 0; }
  .mini-grab { flex: 1; align-self: stretch; display: flex; align-items: center; padding: 0 10px; cursor: grab; }
  .mini-close { width: 32px; align-self: stretch; color: #fff; font-size: 13px; }
  .video-box.docked .vclock, .video-box.docked .grip { display: none; }
  .video-box.docked { background: repeating-linear-gradient(135deg, rgba(127, 127, 127, 0.12) 0 6px, transparent 6px 12px); border-radius: 8px; }
}