/* The launcher panel that opens from the WRM mark. */

.launcher {
  position: fixed; z-index: 80;
  left: 8px; bottom: calc(var(--taskbar-h) + 8px);
  display: flex; flex-direction: column;
  width: min(600px, calc(100vw - 16px));
  height: min(640px, calc(100vh - var(--taskbar-h) - 16px));
  background: var(--surface);
  backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(160%);
  -webkit-backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(160%);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: var(--shadow-pop), var(--highlight);
  overflow: hidden;
  transform-origin: 0% 100%;
  animation: launcher-in var(--dur-2) var(--ease-out);
}
.launcher.is-leaving { animation: launcher-out 140ms var(--ease-in) forwards; }
@keyframes launcher-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes launcher-out { to { opacity: 0; transform: translateY(8px) scale(0.99); } }

.launcher-head { padding: 16px 16px 10px; }
.launcher-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 42px; border-radius: 10px; background: rgb(0 0 0 / 0.24); border: 1px solid var(--line-2); }
.launcher-search:focus-within { border-color: var(--focus-ring); }
.launcher-search .glyph { width: 17px; height: 17px; color: var(--text-3); }
.launcher-search input { flex: 1; border: 0; background: transparent; height: 100%; font-size: var(--fs-3); }
.launcher-search input:focus-visible { box-shadow: none; }

.launcher-body { flex: 1; min-height: 0; padding: 4px 10px 12px; }
.launcher-sec { padding: 10px 6px 4px; }
.launcher-sec h3 { margin: 0 0 8px; padding: 0 4px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); letter-spacing: 0.02em; }
.launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.lapp {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 4px 8px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); text-align: center;
}
.lapp:hover, .lapp[aria-selected="true"] { background: var(--surface-3); }
.lapp .tile { --tile: 44px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-3); box-shadow: var(--highlight); }
.lapp .tile .glyph { width: 20px; height: 20px; }
.lapp .name { font-size: 12px; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.launcher-rows { display: flex; flex-direction: column; gap: 1px; }
.launcher-rows .os-row .tile { --tile: 30px; border-radius: 8px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-3); box-shadow: none; }
.launcher-rows .os-row .tile .glyph { width: 16px; height: 16px; }
.launcher-rows .os-row .t { font-weight: 500; }
.launcher-rows .os-row .b { color: var(--text-3); font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.launcher-rows .os-row .txt { min-width: 0; display: flex; flex-direction: column; }

.launcher-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--line);
  background: rgb(0 0 0 / 0.14);
}
.launcher-who { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.launcher-who .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-4); color: var(--text-2); }
.launcher-who .avatar .glyph { width: 16px; height: 16px; }
.launcher-who b { display: block; font-size: var(--fs-2); font-weight: 600; }
.launcher-who span { display: block; color: var(--text-3); font-size: var(--fs-1); }

@media (max-width: 720px) {
  .launcher { left: 0; right: 0; bottom: var(--taskbar-h); width: 100vw; height: calc(100dvh - var(--taskbar-h)); border-radius: 18px 18px 0 0; }
}