/* Phone geometry only: reuse Calphii's original icons, sound tiles,
   frosted tint, active states, Outside Echoes and Deep Focus. */
.calphii-mobile-shell { display: none; }

@media (max-width: 700px), (max-width: 1100px) and (hover: none) and (pointer: coarse) {
  html:has(body.calphii-mobile),
  body.calphii-mobile {
    height: 100%;
    overflow: hidden !important;
  }

  body.calphii-mobile .page-container {
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  body.calphii-mobile .draggable-area { display: block; height: 100%; }
  body.calphii-mobile .draggable-area > .draggable { display: none !important; }
  body.calphii-mobile .primary-menu-container { display: none !important; }

  body.calphii-mobile .calphii-mobile-shell {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 26;
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    pointer-events: none;
  }

  /* The existing avatar floats independently. Its header cannot intercept
     taps on Outside Echoes underneath; only the avatar is interactive. */
  body.calphii-mobile .calphii-mobile-header {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    height: 46px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
  }

  body.calphii-mobile .calphii-mobile-header > button.primary-menu-section {
    margin-left: auto;
    pointer-events: auto;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 8px;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.calphii-mobile .calphii-mobile-header #profile-photo {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
  }

  /* One mobile Space: Echoes / Deep Focus / horizontally scrollable
     ambience row. Profile stays overlaid, without reserving a menu bar. */
  body.calphii-mobile #smartTiles {
    display: flex !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    width: calc(100% - 20px) !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: hidden;
    z-index: 21;
  }

  /* Move ONLY Calphii's existing sound tiles. No cloned buttons, second audio
     controller, additional panel border or changed desktop widget layout. */
  body.calphii-mobile #calphiiMobileAmbience {
    display: block;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 96px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Feather both clipped edges into the actual Space background.
       The mask stays fixed while the original tiles scroll underneath. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    pointer-events: auto;
  }

  body.calphii-mobile #calphiiMobileAmbience::-webkit-scrollbar {
    display: none;
  }

  body.calphii-mobile #calphiiMobileAmbience > .ambience-player-audio-sets {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 10px;
    width: max-content;
    min-width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body.calphii-mobile #calphiiMobileAmbience .ambience-player-audio {
    flex: 0 0 clamp(100px, 30vw, 136px);
    width: clamp(100px, 30vw, 136px);
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    touch-action: pan-x;
  }

  /* Deep Focus keeps its own compact widget proportions instead of filling
     the screen. Its bottom sits 10px above the 96px ambience strip; extra
     breathing room above belongs to the scene (and Pixel Pet). On short
     landscape phones, shrink within the space below Outside Echoes. */
  body.calphii-mobile #focusZone {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: clamp(240px, 34dvh, 320px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 238px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 22;
  }

  body.calphii-mobile .draggable > .resizer,
  body.calphii-mobile .layout-edit-overlay { display: none !important; }

  body.calphii-mobile :is(.floating-menu, .floating-panel) {
    box-sizing: border-box;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: var(--radius-md);
    overscroll-behavior: contain;
  }

  body.calphii-mobile #profileFloatingPanel {
    position: fixed !important;
    top: calc(68px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    max-height: calc(100dvh - 85px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  /* Desktop account preferences are read-only on phones. */
  body.calphii-mobile #profileFloatingPanel > :not(:has(.profile-identity)) {
    display: none !important;
  }
  body.calphii-mobile #profileFloatingPanel :is(
    .profile-avatar-button, #profileNameDisplay, #profileNameInput, #saveProfileNameButton
  ) {
    pointer-events: none;
  }

  body.calphii-mobile #calphiiPixelPetRoamer { z-index: 24 !important; }

  body.calphii-mobile #calphiiToastRail,
  body.calphii-mobile #socialToastRail {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  body.calphii-mobile .overlay-prompt {
    position: fixed;
    inset: calc(10px + env(safe-area-inset-top, 0px))
      10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.calphii-mobile .calphii-mobile-shell * {
    transition: none !important;
    animation: none !important;
  }
}