/*
 * rakazo-mobile-fix.css — mobile layout override for the Rakazo computer overlay.
 * Targets rakazo app:edge @ 4cdf3e2 (apps/web/src/pages/Shell.tsx "computer-chrome",
 * apps/web/src/components/computer/ComputerWorkspace.tsx dock <nav>).
 * Everything is scoped to phones (max-width: 767px = Tailwind `md` breakpoint), so the
 * desktop layout (>= 768px) is untouched. Unlayered CSS, so it wins over Tailwind v4's
 * @layer utilities without needing !important.
 */
@media (max-width: 767px) {
  /* ---------- 1. Top control bar ---------- */
  [data-testid="computer-chrome"] {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  /* Row 1: avatar + name + status badge, with room reserved for the close (X) button. */
  [data-testid="computer-chrome"] > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
    gap: 8px;
    padding-right: 40px;
  }
  [data-testid="computer-chrome"] > div:first-child > span[class*="rounded-full"] {
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Row 2: Stop / Skip / I'm done / Teach a task / ... in one row that scrolls sideways
     instead of running off the edge or stacking on the badge. */
  [data-testid="computer-chrome"] > div:last-child {
    flex: 1 1 100%;
    min-width: 0;
    gap: 8px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
  }
  [data-testid="computer-chrome"] > div:last-child::-webkit-scrollbar {
    display: none;
  }
  [data-testid="computer-chrome"] > div:last-child > *,
  [data-testid="computer-chrome"] > div:last-child > div > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Close (X) stays pinned top-right on row 1, always reachable. Its containing block is the
     chrome, so the scrolling row does not clip it. */
  [data-testid="computer-chrome"] > div:last-child > button:last-child {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 1;
  }

  /* ---------- 2. Bottom dock (globe / terminal / folder) ---------- */
  /* The noVNC page inside the iframe pins its own Paste / Keyboard / Trackpad buttons
     bottom-right (48px each, 12px from the edges). Move the dock bottom-left, on the same
     baseline, so the two rows never overlap and nothing peeks out behind the pill. */
  [data-testid="computer-viewport"] nav {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    translate: none;
    transform: none;
    padding: 5px;
    z-index: 40;
  }

  /* ---------- 3. Remote desktop ---------- */
  /* A strip for the Fit/Fill toggle + pan slider (rakazo-mobile-fix.js). Reserved only while
     the dock is shown (not while teaching), so the screen never sits under the control. */
  html.rk-mobile-screen [data-testid="computer-viewport"] > div:has(> div > nav) {
    padding-top: 40px;
  }
  /* Fill mode: size the iframe to the full available height at the remote 16:10 aspect, so
     noVNC's scale-to-fit fills the height instead of leaving black bands. Pan with
     --rk-pan-x (set by the JS from the slider or a drag). */
  html.rk-fill [data-testid="computer-viewport"] div:has(> nav) > iframe {
    height: 100%;
    width: auto;
    max-width: none;
    aspect-ratio: var(--rk-screen-aspect, 1280 / 800);
    translate: var(--rk-pan-x, 0px) 0;
  }
  html.rk-fill [data-testid="computer-viewport"] div:has(> nav):has(> iframe) {
    touch-action: none;
  }
}

#rk-screen-bar {
  display: none;
}
@media (max-width: 767px) {
  #rk-screen-bar {
    position: fixed;
    z-index: 31; /* above the computer overlay (z-30), below menus/dialogs (z-50) */
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 40px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    background: var(--background, #0b0c0e);
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    color: var(--foreground, #e7e7e7);
    font: 500 13px/1 system-ui, -apple-system, sans-serif;
  }
  #rk-screen-bar[hidden] {
    display: none;
  }
  #rk-screen-bar button {
    flex-shrink: 0;
    height: 28px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
  }
  #rk-screen-bar input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: currentColor;
  }
  #rk-screen-bar .rk-hint {
    flex: 1 1 auto;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}