/* FAB bar */
#fab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.fab-inner {
  display: flex;
  align-items: stretch;
  height: var(--fab-h);
}

.fab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-1);
  color: var(--text-2);
  transition: color .15s, background .15s;
  position: relative;
}

.fab-btn:active { background: var(--bg-2); }

.fab-btn.fab-active {
  color: var(--btn-color);
}

.fab-icon svg { display: block; }

.fab-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* Pulse animation for active session FAB button */
.fab-btn.fab-active .fab-icon {
  animation: fab-pulse 2s ease-in-out infinite;
}

@keyframes fab-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: .85; }
}


/* Active session card */
#active-session-card {
  position: fixed;
  bottom: calc(var(--fab-h) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 45;
  transform: translateY(100%);
  transition: transform .25s ease;
}

#active-session-card.visible {
  transform: translateY(0);
}

.session-card {
  margin: 0 var(--sp-3) var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--session-color);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.session-left { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
.session-icon { color: var(--session-color); flex-shrink: 0; }
.session-info { min-width: 0; }
.session-type { font-size: 13px; font-weight: 600; color: var(--text-1); }
.session-detail { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; }
.session-switch {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--session-color); font-weight: 500;
  padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.06);
}

.session-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.session-elapsed {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--session-color);
  font-family: var(--font-mono);
}
.session-stop {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(248,113,113,.2);
  color: var(--danger);
  display: flex; align-items: center; justify-content: center;
}
.session-stop:active { background: rgba(248,113,113,.4); }

.session-pause-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(148,163,184,.15);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.session-pause-btn:active { background: rgba(148,163,184,.3); }

.session-card-paused .session-elapsed { opacity: .5; }
.session-card-paused .session-pause-btn { color: var(--session-color); }

/* App nav bar at top (hidden on lock) */
#app-nav {
  display: none; /* We use the header inside each view instead */
}

/* Bottom safe area spacer for scroll content */
.scroll-safe {
  height: calc(env(safe-area-inset-bottom) + 8px);
}