/* =========================================================================
   EMPIRIUM OS — MOBILE: COMPONENT LIBRARY
   Full-screen grid (Utilities tool) + the picker overlay used from other
   mobile surfaces (mobile-command-extra.js's "look forward" cards). Overlay
   shape mirrors app.css's .pair-scan / .pair-scan-panel.
   ========================================================================= */

.clm-page{ padding-bottom:8px; }
.clm-intro{ margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.45; }

.clm-upload-btn{ width:100%; margin-bottom:16px; }

.clm-empty{
  padding:32px 16px; text-align:center; color:var(--faint);
  border:1px dashed var(--line-soft); border-radius:var(--r-lg);
  font-size:13px; line-height:1.5;
}

.clm-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
.clm-cell{
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:6px; display:flex; flex-direction:column; gap:6px;
}
.clm-thumb{
  position:relative; aspect-ratio:4/3; border-radius:var(--r-md);
  overflow:hidden; background:var(--card);
  display:flex; align-items:center; justify-content:center;
}
.clm-thumb-img{ display:block; width:100%; height:100%; object-fit:cover; }
.clm-thumb-ph{ color:var(--faint); font-size:11px; }

/* GIF thumbnails are frozen on a static poster — a tap swaps in the real
   animation. The play glyph fades on tap since there is no hover on touch. */
.clm-thumb[data-clm-gif-toggle]::after{
  content:'\25B6'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6);
  opacity:.85; transition:opacity .15s ease; pointer-events:none;
}
.clm-thumb[data-clm-gif-toggle].is-playing::after{ display:none; }
.clm-badge{
  position:absolute; top:6px; right:6px; padding:1px 6px;
  border-radius:4px; background:rgba(0,0,0,.55);
  color:#fff; font-family:var(--font-mono); font-size:9px; letter-spacing:.06em;
}

.clm-cell-tools{ display:flex; align-items:center; gap:6px; }
.clm-cell-name{ flex:1; min-width:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.clm-cell-del{
  flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-soft); border-radius:6px; background:var(--card);
  color:var(--faint); font-size:16px; line-height:1;
}
.clm-cell-del:active{ border-color:var(--bad, #e05656); color:var(--bad, #e05656); }

/* ---- picker overlay ---- */
.clm-pick-scan{
  position:fixed; inset:0; z-index:95;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:rgba(5,7,13,.88); backdrop-filter:blur(10px);
}
.clm-pick-panel{
  position:relative; width:min(100%,480px); max-height:82vh;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line-bright);
  border-radius:var(--r-lg); padding:12px;
  box-shadow:0 18px 54px rgba(0,0,0,.72);
}
.clm-pick-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.4px;
  color:var(--accent);
}
.clm-pick-body{ overflow-y:auto; }
.clm-cell-pick{ cursor:pointer; }
.clm-cell-pick.is-busy{ opacity:.5; pointer-events:none; }