/* ==========================================================================
   Phone layout — html.is-phone is toggled by src/mobile-shell.js at
   <= 640px. Windows become full-screen sheets that stop at the taskbar
   (--taskbar-h is measured live), Start fits the screen, and multi-pane apps
   collapse to a single column. `!important` is used where JS writes inline
   geometry (window position/size) that must not apply on phones.
   ========================================================================== */

html.is-phone #desktop {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

html.is-phone #icons {
  padding: 8px 4px;
  overflow-y: auto;
}

html.is-phone .desktop-icon {
  width: 80px;
  padding: 6px 2px;
  gap: 5px;
}

html.is-phone .desktop-icon .emoji img {
  width: 50px;
  height: 50px;
}

html.is-phone .desktop-icon span:last-child {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Windows: full-width sheets between the top of the screen and the taskbar. */
html.is-phone .app-window,
html.is-phone .app-window.maximized {
  position: fixed !important;
  inset: 0 0 var(--taskbar-h, 44px) 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

html.is-phone .app-window .window-content {
  min-height: 0;
  overflow: auto;
}

html.is-phone .window-maximize,
html.is-phone .window-resize-handle {
  display: none !important;
}

html.is-phone .window-titlebar {
  cursor: default;
}

html.is-phone .window-minimize,
html.is-phone .window-close {
  width: 38px;
  height: 28px;
}

/* Taskbar + Start */
html.is-phone #taskbar {
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}

html.is-phone #taskbar-brand,
html.is-phone #reset-layout-btn {
  display: none;
}

html.is-phone #start-menu {
  left: 6px !important;
  right: 6px;
  bottom: calc(var(--taskbar-h, 44px) + 4px) !important;
  width: auto !important;
  max-height: calc(100dvh - var(--taskbar-h, 44px) - 14px);
  overflow-y: auto;
  z-index: 95000;
}

html.is-phone .start-menu-body {
  min-height: 0;
}

html.is-phone .start-item {
  min-height: 42px;
}

html.is-phone .start-menu-footer {
  flex-wrap: wrap;
}

/* Explorer: one column, breadcrumbs + Up do the navigating. */
html.is-phone .xp-explorer-body {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.is-phone .xp-sidebar,
html.is-phone .xp-details,
html.is-phone .xp-search {
  display: none !important;
}

html.is-phone .xp-addressbar {
  gap: 6px;
}

html.is-phone .xp-crumbs {
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}

/* Mail: folder chips, then the message list, then the preview. */
html.is-phone .xp-mail-toolbar {
  flex-wrap: nowrap;
  overflow-x: auto;
}

html.is-phone .xp-mail-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(110px, 32%) minmax(0, 1fr);
  min-height: 100%;
}

html.is-phone .xp-mail-sidebar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-right: none;
  border-bottom: 1px solid var(--divider);
}

html.is-phone .xp-mail-folder-btn {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  gap: 6px;
}

html.is-phone .xp-mail-list {
  overflow-y: auto;
  border-bottom: 1px solid var(--divider);
}

html.is-phone .xp-mail-sidebar,
html.is-phone .xp-mail-list,
html.is-phone .xp-mail-preview {
  grid-column: 1 / -1;
  min-width: 0;
}

html.is-phone .xp-mail-folder-btn {
  margin: 0;
}

/* Taskbar buttons: icon-only on phones, the window fills the screen anyway. */
html.is-phone .taskbar-btn {
  max-width: 44px;
  min-width: 40px;
  justify-content: center;
  padding: 0;
}

html.is-phone .taskbar-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Control Panel */
html.is-phone .xp-settings-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.is-phone .xp-settings-sidebar {
  display: none;
}

html.is-phone .xp-settings-grid {
  grid-template-columns: minmax(0, 1fr);
}

html.is-phone .xp-theme-cards {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

/* Popups/menus must stay on screen. */
html.is-phone #context-menu {
  max-width: calc(100vw - 12px);
}

/* Vista's user picture hangs above the Start menu; on phones the menu
   scrolls, so keep the picture inside it. */
html.is-phone.shell-vista .start-user-picture {
  position: static;
  width: 36px;
  height: 36px;
  margin: 0 0 4px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

html.is-phone.shell-vista .start-user {
  margin-top: 0;
}

html.is-phone.shell-vista .start-menu-top {
  flex-direction: column;
  align-items: flex-start;
  padding-top: 6px;
}

/* Mail toolbar on phones: icon strip, labels on long-press via title. */
html.is-phone .xp-mail-tool {
  flex-direction: column;
  min-width: 44px;
  padding: 3px 4px;
}

html.is-phone .xp-mail-tool-label {
  font-size: 10px;
}

html.is-phone .xp-mail-tool-sep {
  display: none;
}