/* Heyming OS — taskbar: running-apps strip, app icons, focus rings, horizontal scroll.
 *
 * All color literals migrated to brand tokens (see /brand.css). The
 * geometry and behavior are unchanged; only the palette is now driven
 * by the brand. The blue accent ring (was #3182ce / #63b3ed) is now the
 * brand violet so taskbar focus matches every other focus ring on the OS.
 */

/* Taskbar Button */
.taskbar-app {
  height: 32px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text-1);
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--motion-hover), border-color var(--motion-hover),
    color var(--motion-hover);
  max-width: 200px;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.taskbar-app:hover {
  background: var(--accent-primary-soft);
  border-color: var(--hairline-accent);
}

.taskbar-app.active {
  background: var(--accent-primary-bg);
  border-color: var(--accent-primary);
  color: var(--text-on-accent);
}

.taskbar-app:focus-visible {
  outline: 2px solid var(--focus-ring-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-outer);
}

#app-launcher:focus-visible,
#os-close:focus-visible {
  outline: 2px solid var(--focus-ring-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-outer);
}

/* Many windows: horizontal scroll instead of squashing buttons */
#running-apps.taskbar-running-apps {
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) var(--surface-0);
  -webkit-overflow-scrolling: touch;
}

#running-apps.taskbar-running-apps::-webkit-scrollbar {
  height: 6px;
}

#running-apps.taskbar-running-apps::-webkit-scrollbar-track {
  background: var(--surface-0);
  border-radius: 3px;
}

#running-apps.taskbar-running-apps::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 3px;
}

#running-apps.taskbar-running-apps::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* Application Icons (window title bar) */
.app-icon {
  flex-shrink: 0;
  font-size: 16px;
  display: inline-block;
}

/* Stay above #os-windows when a window is dragged over the taskbar strip. */
#os-taskbar {
  z-index: 250;
}

#taskbar-clock:focus-visible {
  outline: 2px solid var(--focus-ring-inner);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--focus-ring-outer);
}

.taskbar-presence {
  height: 28px;
  min-width: 28px;
  margin-left: 4px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--hairline));
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-2));
  color: var(--text-1);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  cursor: help;
  flex-shrink: 0;
  transition: background var(--motion-hover), border-color var(--motion-hover);
}

.taskbar-presence::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 45%, transparent);
  animation: taskbar-presence-pulse 2s ease-out infinite;
  flex-shrink: 0;
}

.taskbar-presence[hidden] {
  display: none !important;
}

.taskbar-presence:focus-visible {
  outline: 2px solid var(--focus-ring-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-outer);
}

@keyframes taskbar-presence-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .taskbar-presence::before {
    animation: none;
  }
}

.taskbar-presence-tip {
  position: fixed;
  z-index: 1000001;
  max-width: 240px;
  padding: 6px 9px;
  border-radius: var(--radius, 4px);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: #f0f3f6;
  background: #1c2128;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 80ms ease, transform 80ms ease;
}

.taskbar-presence-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}