/* APPS VIEWER (static/runtime/apps-viewer.js) — an open app inside the Apps
   destination: a sidebar of every app beside the app, under a slim header.
   The layout mirrors the Files tree's (files-new styles.css): a sized list
   column, the viewer taking the rest with a readable floor, and the shared
   side-panel toggle + divider (side-panel.css) on the viewer's left edge. */

/* While viewing, the page is a bounded column like #files-tab: only the
   sidebar list and the app itself scroll, never the page around them. */
#apps-tab.apps-viewing {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 10px;
}

.apps-viewer {
  --apps-sidebar-width: 264px;
  display: grid;
  grid-template-columns: minmax(0, var(--apps-sidebar-width)) minmax(min(360px, 100%), 1fr);
  gap: 0 22px;
  flex: 1 1 auto;
  min-height: 0;
  transition: grid-template-columns 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apps-viewer[hidden] { display: none; }
.apps-viewer.apps-sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
}

.apps-sidebar {
  min-width: 0; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  transition: opacity 180ms ease;
}
.apps-viewer.apps-sidebar-collapsed .apps-sidebar { opacity: 0; pointer-events: none; }
.apps-sidebar-title {
  margin: 4px 4px 0;
  font-size: var(--text-xs, 11px); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted);
}
.apps-sidebar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* The compact card: icon, name, status dot. */
.apps-side-card {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 8px 11px;
  border: 1px solid var(--ui-line-soft); border-radius: 10px;
  background: var(--ui-panel); color: var(--ui-text-soft);
  font: inherit; font-size: var(--text-sm, 12.5px); text-align: left; cursor: pointer;
  transition: border-color var(--speed, 140ms) ease, background var(--speed, 140ms) ease;
}
.apps-side-card:hover { border-color: var(--ui-line); color: var(--ui-text); }
.apps-side-card.active {
  border-color: var(--ui-accent-line); background: var(--ui-accent-soft); color: var(--ui-text);
}
.apps-side-icon { width: 16px; height: 16px; flex: none; color: var(--ui-accent); }
.apps-side-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps-side-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ui-muted); }
.apps-side-dot.app-status-ready,
.apps-side-dot.app-status-running { background: var(--ui-success); }
.apps-side-dot.app-status-starting,
.apps-side-dot.app-status-restarting { background: var(--ui-warning); }
.apps-side-dot.app-status-needs_attention,
.apps-side-dot.app-status-failed { background: var(--ui-danger); }

/* The app pane: the positioning context for the shared toggle + divider,
   clipped to its own rounded corners exactly like Files' viewer column. */
.apps-viewer-main {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius, 18px);
  background: var(--ui-panel); overflow: hidden;
}
.apps-viewer-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px;
  border-bottom: 1px solid var(--ui-line-soft);
}
.apps-viewer-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: var(--text-md, 15px); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apps-viewer-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.apps-viewer-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.apps-viewer-main:fullscreen { border-radius: 0; border: 0; }
/* Where the element fullscreen API is missing, the same control pins the pane. */
.apps-viewer-main.apps-viewer-fullpage {
  position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0;
}

/* Phone: the sidebar is the viewer's first view; opening an app slides it
   away and the app in over it; the back arrow (.apps-viewer-picking) slides
   the sidebar back in as the switcher. No resizing or collapsing on a single
   column — the component's controls stay out of the way. */
@media (max-width: 820px) {
  #apps-tab.apps-viewing { padding-bottom: 0; }
  .apps-viewer,
  .apps-viewer.apps-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    position: relative; overflow: hidden;
  }
  .apps-viewer .apps-sidebar,
  .apps-viewer .apps-viewer-main {
    grid-area: 1 / 1;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }
  .apps-viewer.apps-sidebar-collapsed .apps-sidebar { opacity: 1; pointer-events: auto; }
  .apps-viewer .apps-sidebar { padding: 4px 0 16px; }
  .apps-viewer.apps-viewer-picking .apps-viewer-main,
  .apps-viewer:not(.apps-viewer-picking) .apps-sidebar {
    visibility: hidden;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 240ms;
  }
  .apps-viewer.apps-viewer-picking .apps-viewer-main { transform: translateX(100%); }
  .apps-viewer:not(.apps-viewer-picking) .apps-sidebar { transform: translateX(-100%); }
  .apps-viewer .side-panel-divider { display: none; }
  .apps-side-card { min-height: 48px; }
  /* One-handed: every header control is a full 44px target on the phone. */
  .apps-viewer-head { padding: 4px 6px; }
  .apps-viewer-head .topbar-icon-control {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .apps-viewer, .apps-sidebar, .apps-viewer .apps-viewer-main { transition: none !important; }
}