/*
 * OISIF TASKBAR — Component Styles
 * ==================================
 *
 * Requires: oisif-tokens.css
 *
 * The bottom taskbar with dynamic buttons and clock.
 * Supports both class-based (.oisif-taskbar) and ID-based
 * (#taskbar) selectors for compatibility.
 */

/* ══════════════════════════════════════════════════════════════
   TASKBAR
   ══════════════════════════════════════════════════════════════ */

#taskbar,
.oisif-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--oisif-surface);
  box-shadow:
    0 -2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 var(--oisif-h-light);
  display: flex;
  align-items: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  z-index: 9500;
}

.tb-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent, black 0%, black 100%, transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent, black 0%, black 100%, transparent
  );
  transition: -webkit-mask-image 0.2s, mask-image 0.2s;
}

.tb-btns::-webkit-scrollbar {
  display: none;
}

.tb-btns.fade-right {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
}

.tb-btns.fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent, black 24px);
  mask-image: linear-gradient(to right, transparent, black 24px);
}

.tb-btns.fade-both {
  -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}

.tb-sep {
  width: 1px;
  height: 22px;
  background: var(--oisif-text-sep);
  flex-shrink: 0;
}

.tb-btn {
  font-family: var(--oisif-font-display);
  font-size: var(--oisif-font-size-sm);
  letter-spacing: var(--oisif-letter-spacing-md);
  text-transform: uppercase;
  color: var(--oisif-dim);
  border: none;
  background: var(--oisif-surface);
  box-shadow: var(--oisif-shadow-out-sm);
  border-radius: var(--oisif-radius-lg);
  padding: 5px 14px;
  cursor: pointer;
  transition: color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.tb-btn:hover {
  color: var(--oisif-fg);
}

.tb-btn:active {
  box-shadow: var(--oisif-shadow-in-sm);
}

/* Active state: window is visible and focused */
.tb-btn.pressed {
  box-shadow: var(--oisif-shadow-in-sm);
  color: var(--oisif-accent);
}

/* Minimized state: window exists but is hidden */
.tb-btn.minimized {
  box-shadow: var(--oisif-shadow-out-sm);
  color: var(--oisif-text-hint);
}

#clock,
.oisif-clock {
  font-family: var(--oisif-font-display);
  font-size: var(--oisif-font-size);
  letter-spacing: var(--oisif-letter-spacing-md);
  color: var(--oisif-dim);
  margin-left: auto;
  padding: 4px 12px;
  flex-shrink: 0;
  background: var(--oisif-bg);
  box-shadow: var(--oisif-shadow-in-sm);
  border-radius: var(--oisif-radius-lg);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  #taskbar,
  .oisif-taskbar {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .tb-btn {
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
  }

  #clock,
  .oisif-clock {
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
  }
}